这篇文章主要介绍“DIV CSS绝对定位布局的方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“DIV CSS绝对定位布局的方法”文章能帮助大家解决问题。
1、要用到CSS花式单词及讲明
position：绝对定位花式完成DIV定位结构其设置值absolute与relative运用
width：宽度，配置对象宽度
height：高度，设置对象高度
line-height：行高，配置文本行高
left：配置div对象靠左距离
right：配置div对象靠左间隔
top：配置div对象靠左隔绝距离
bottom：配置div对象靠左隔断
bac公斤round：靠山，设置装备摆设后援图片与色调
color：配置字体色彩
font-size：配置字体大小
font-weight：设置字体加粗
2、用到HTML标签及诠释
div标签：用于构造结构框架
ul li标签：用于布局列表型数据列表
h4标签：用于布局栏指标题
CSS5将潜伏翰墨后整图作为最外层大盒子DIV的后盾图片，命名为bg.jpg。
潜伏笔墨后的图片素材，可直接糊口生涯使用
这一个最外层DIV，设置好宽度高度、靠山图片，同时设置装备摆设position:relative。此盒子里分袂布局3个小DIV盒子，分袂设置装备摆设好宽度高度，同时设置position:absolute相对定位再使用left、right、top、bottom这几个花色定位好这3个盒子地位。
颠末以上组织便可结构好三个DIV盒子，再分袂构造栏指标题与内容便可实现。
同时此案例咱们可在CSS5提供的收费初始化模板根蒂前程行机关，以便兼容各大涉猎器。
下列是最外层DIV盒子及CSS代码与内容3个小盒子机关代码。
1、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位 实例在线演示 CSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- css5.com.cn -->
</head>
<body>
<div id="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
以上HTML构造一个大盒子使用ID，里面三个小DIV盒子使用CLASS。
2、CSS代码
#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat}
/* position:relative是相对定位环节，父级配置 */
.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}
.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}
.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}
/* 三个小盒子使用position:relative同时配置宽度 高度 left right top bottom实现构造与准肯定位 */
额定阐明：以上三个小盒子相对定位宽度、高度、top、left、right、bottom的准确值必需颠末PS软件失去，置信退出CSS5培训同砚通过上课曾经学会获取各属性和值的门径。（CSS5课堂中引见和视频哄骗演示过各值PS若何获取的技能手法）这里就不再具体先容与教学。
3、大要造诣截图
在DW软件中成绩截图
从以上图看出布局结构初现。再以上根抵上分袂机关栏目题目与对应模式便可完成此机关。
1、完整CSS代码
@charset "utf-8";
/* CSS5-CSS初始化模板-css5.com.cn */
body, div, ul, li,h4{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode //www.css5.com.cn/jiqiao/325.shtml */
ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#FFF;bac公斤round:#FFF; text-align:center}
a{color:#FFF;text-decoration:none}
a:hover{color:#BA2636;text-decoration:underline}
/* 遵循本实例 设置装备摆设超链接字体与不有超链接字体演示为白色 */
#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;bac千克round:url(bg.jpg) no-repeat}
/* position:relative是相对定位关头，父级设置装备摆设 */
.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}
.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}
.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}
/* position:absolute是相对定位症结，子级设置装备摆设同时lef right top bottom配合使用 */
h4.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left}
/* 问题抗衡配置 */
ul.list{ text-align:left; width:100%; padding-top:8px}
ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden}
/* 加了overflow:hidden预防内容过多后主动换行 窜伏凌驾模式 */
2、残缺HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对定位 实例在线演示 CSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- css5.com.cn -->
</head>
<body>
<div id="wrapper">
<div class="box1">
<h4 class="title">新闻动态</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/wenti/558.shtml">不会按次能学会CSS吗？</a></li>
<li><a href="//www.css5.com.cn/wenti/556.shtml">DIVCSS学习难吗？</a></li>
<li><a href="//www.css5.com.cn/peixun/">我要列入CSS5的培训</a></li>
<li><a href="//www.css5.com.cn/tools/720.shtml">jQuery所以版本鸠合整理</a></li>
</ul>
</div>
<div class="box2">
<h4 class="title">CSS5栏目</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/html/">CSS根基教程</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML底子教程</a></li>
<li><a href="//www.css5.com.cn/wenti/">CSS问题</a></li>
<li><a href="//www.css5.com.cn/tools/">CSS制作器材</a></li>
<li><a href="//www.css5.com.cn/jiqiao/">DIV CSS才智</a></li>
<li><a href="//www.css5.com.cn/texiao/">DIV+CSS+JS特效</a></li>
</ul>
</div>
<div class="box3">
<h4 class="title">网站栏目</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/css/">DIV CSS入门</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门教程</a></li>
<li><a href="//www.css5.com.cn/shili/">CSS实例</a></li>
<li><a href="//www.css5.com.cn/">CSS5首页</a></li>
<li><a href="//www.css5.com.cn/mokuai/">DIV CSS模块模板</a></li>
<li><a href="//www.css5.com.cn/w3c/">DIV CSS WEB标准</a></li>
</ul>
</div>
</div>
</body>
</html>
关于“DIV CSS绝对定位布局的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
