相对于定位咱们要用到名目position:absolute与position:relative，同时需要top、bottom、left、right配合组织完成DIV绝对定位。经由着实案例演示与引见相对于定位结构方法技术。

 

　　Css div绝对定位案例截图

 

　　遇到以上的不规则案例组织，要是使用float、padding等浮动实现比拟穷苦，但使用position相对于定位即可很好简单地完成。此后CSS5为大家介绍position绝对定位门径结构以上小的案例。

 

　　一、用到CSS名堂和HTML标签及相应讲明

 

　　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标签：用于布局列表型数据列表

 

　　h3标签：用于布局栏指标题

 

　　二、相对于定位现实案例组织思维讲明先容

 

　　CSS5将潜伏翰墨后整图作为最外层大盒子DIV的后盾图片，命名为bg.jpg。

 

　　潜伏笔墨后的图片素材，可直接糊口生涯使用

 

　　这一个最外层DIV，设置好宽度高度、靠山图片，同时设置装备摆设position:relative。此盒子里分袂布局3个小DIV盒子，分袂设置装备摆设好宽度高度，同时设置position:absolute相对定位再使用left、right、top、bottom这几个花色定位好这3个盒子地位。

 

　　颠末以上组织便可结构好三个DIV盒子，再分袂构造栏指标题与内容便可实现。

 

　　同时此案例咱们可在CSS5提供的收费初始化模板根蒂前程行机关，以便兼容各大涉猎器。

 

　　三、相对于定位案例需要代码

 

　　下列是最外层DIV盒子及CSS代码与内容3个小盒子机关代码。

 

　　1、HTML代码

 

　　html>

 

　　绝对定位？实例在线演示？CSS5

 

　　以上HTML构造一个大盒子使用ID，里面三个小DIV盒子使用CLASS。

 

　　2、CSS代码

 

　　#wrapper{?margin:0?auto;position:relative;width:610px;height:559px;background:url（bg.jpg）？no-repeat}

 

　　。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}

 

　　额定阐明：以上三个小盒子相对定位宽度、高度、top、left、right、bottom的准确值必需颠末PS软件失去，置信退出CSS5培训同砚通过上课曾经学会获取各属性和值的门径。（CSS5课堂中引见和视频哄骗演示过各值PS若何获取的技能手法）这里就不再具体先容与教学。

 

　　3、大要造诣截图

 

　　在DW软件中成绩截图

 

　　从以上图看出布局结构初现。再以上根抵上分袂机关栏目题目与对应模式便可完成此机关。

 

　　四、残缺案例代码

 

　　1、完整CSS代码

 

　　@charset?"utf-8";

 

　　body,?div,?ul,?li,h3{margin:0;?padding:0;font-style:?normal;font:12px/22px?"\5B8B\4F53",Arial,?Helvetica,?sans-serif}

 

　　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}

 

　　。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}

 

　　h3.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}

 

　　2、残缺HTML代码：

 

　　html>