DIVCSS5为大家实例讲解绝对定位布局。绝对定位我们要用到样式position:absolute和position:relative，同时需要top、bottom、left、right配合布局实现DIV绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。Cssdiv绝对定位案例截图
遇到以上的不规则案例布局，如果使用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标签：用于布局结构框架
ulli标签：用于布局列表型数据列表
h3标签：用于布局栏目标题
二、绝对定位实际案例布局思维解释介绍-TOP
DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的背景图片，命名为bg.jpg。
让一个图片在div任意位置，可以使用绝对定位的方式。如下示例代码：
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试页面</title>
</head>
<body>
<style type="text/css">
.test-box{width:300pxheight:260pxmargin:0px autoposition:relativeborder:1px solid #333}
.test-box img{position:absolutebottom:10pxleft:50%margin-left:-60pxborder:0}
</style>
<div class="test-box">
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif?v=31680756.gif">
</div>
</body>
</html>
示例中做了一个宽为300px，高为260px像素的容器，其中图片通过绝对定位，控制其位于容器的水平居中，容器底部的位置。bottom:10px控制图片距离底部10px，left:50%、margin-left:-60px控制图片水平居中。其中的margin-left的值根据图片宽度变化，为负的二分之一图片宽度。
最终效果如下图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）