DIVCSS5为大家实例讲解绝对定位布局。绝对定位我们要用到样式position:absolute和position:relative，同时需要top、bottom、left、right配合布局实现DIV绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。
Css div绝对定位案例截图
遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。
一、用到CSS样式和HTML标签及相应解释 - TOP
1、要用到CSS样式单词及解释
position：绝对定位样式实现DIV定位布局其设置值absolute和relative应用
width：宽度，设置对象宽度
height：高度，设置对象高度
line-height：行高，设置文本行高
left：设置div对象靠左距离
right：设置div对象靠左距离
top：设置div对象靠左距离
bottom：设置div对象靠左距离
background：背景，设置背景图片和颜色
color：设置字体颜色
font-size：设置字体大小
font-weight：设置字体加粗
2、用到HTML标签及解释
div标签：用于布局结构框架
ul li标签：用于布局列表型数据列表
h3标签：用于布局栏目标题
二、绝对定位实际案例布局思维解释介绍 - TOP
DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的背景图片，命名为bg.jpg。
隐藏文字后的图片素材，可直接保存使用
这一个最外层DIV，设置好宽度高度、背景图片，同时设置position:relative。此盒子里分别布局3个小DIV盒子，分别设置好宽度高度，同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。
通过以上布局即可布局好三个DIV盒子，再分别布局栏目标题和内容即可实现。
同时此案例我们会在DIVCSS5提供的免费初始化模板基础上进行布局，以便兼容各大浏览器。
三、绝对定位案例重要代码 - TOP
以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。
1、HTML代码
html>
绝对定位实例在线演示DIVCSS5
