本文详细介绍了CSS中的定位概念，包括相对定位、绝对定位和固定定位，解析了定位偏移量和层级管理，强调了z-index在复杂项目中的挑战。此外，还探讨了定位的兼容性问题及其解决方案，并提到了透明度的实现方式。
首先解释下定位偏移量和层级的概念。定位偏移量有四个，即top/right/bottom/left，属性值是数字+px，在给元素定位了之后，需要告诉元素往什么方向进行定位。比如left:30px;就是告诉元素要向左偏移30px。层级表示方法：z-index:[number]。层级就是将咱的页面分成不同的层次，使用z-index可以规定元素所在的层级。不建议常用，因为放在打的项目里边，层级会非常混乱。
默认情况下，定位元素层级是后者高于前者。
1、relative相对定位
position:relative; 相对定位，表示相对于原来位置偏移。特点如下
Ø 不影响元素本身的特性；
Ø 不使元素脱离文档流；（元素移动位置后原始位置依然保留）
Ø 如果没有定位偏移量，对元素本身没有任何影响；
Ø 提升层级
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
2、absolute绝对定位
position:absolute; 绝对定位
Ø 使元素完全脱离文档流，元素一旦成为绝对定位，则相当于漂浮在空中一般，不再占用文档中位置。就像一桶水中有个西瓜，把西瓜拿出来（定位决定定位）后，其他的谁会自动补充西瓜的位置。
Ø 使内嵌支持宽高；
Ø 可以使块属性标签内容撑开宽度；
Ø 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
Ø 相对定位一般都是配合相对定位元素使用；
Ø 提升层级
3、position:fixed；固定定位
与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
4、定位的兼容问题、解决方法
a) position:relative;
在 IE6 下父级的 overflow:hidden;包不住子级的relative;也就是说，父级设置了 overflow:hidden;而子元素是一个相对定位元素，这时父级是包不住子元素的。
解决办法：给父级加同样的定位
b) position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
c) position:absolute; 绝对定位元素子级的浮动可以不用写清浮动的方法；
d) position:fixed; 固定定位元素子级的浮动可以不用写清浮动的方法；（IE6不兼容）
5、常用技巧与综合实例
我们常常是将绝对定位和相对定位结合使用，给父元素加相对定位，但不加定位偏移（如果需要也可加上），然后子元素使用绝对定位进行偏移。这样子保证了页面内每一块区域相互独立，不会因为某个绝对定位元素是相对于文档定位而紊乱，也不会因为某个元素脱离文档流导致页面其他元素受到影响。
实例运行效果：
原拟10月赴华那些字就是利用绝对定位定在那边的，当然视频上的播放按钮也可以同理放在那边，暂停播放的切换要用到js了，有兴趣的朋友可以自己尝试下。这个小例子本人用了很多浮动，和大家一起重温下，当然这些用定位也可以实现，比如所有的icon都可以用定位。右下角的红色矩形是利用固定定位模拟常见的推送。最后附上源码。
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>实验一</title>
<style type="text/css">
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
body{height: 1000px;}/* 呃，这边加这么多高度只是为了凸显定位值为fixed的作用 */
.clear{zoom:1;}
.clear:after{content: "";display: block;clear: both;}
.all{width: 600px;height: 461px;border: 1px solid #000;margin: 30px auto;position: relative;padding: 0px 10px;}
.header{background: #EAF9FE;height: 30px;line-height: 30px;}
.jrtt{font-size: 16px;font-weight:600;padding-left: 13px;}
.headqita{font-size: 12px;color:#666666;padding-right: 10px;float: right;}
.bodyer{padding-top:15px;}
.bodyer1{float: left;width: 302px;}
.bodyer1 h3{font-size: 16px;line-height: 30px;}
.bodyer11 span{float: left;height: 24px;line-height: 24px;width: 80px;}
.bodyer11 .span1{font-size: 13px;color: #000;}
.bodyer11 .span1:before{background: url(./1-2.png) no-repeat 0px 0px;content:"";width: 17px;height:14px;display: inline-block;}
.bodyer11 .span2{font-size: 13px;color: #000;color: #90908E;}
.bodyer11 .span2:before{background: url(./1-3.png) no-repeat 0px 0px;content:"";width: 17px;height:14px;display: inline-block;}
.bodyer11 .span3{font-size: 13px;color: #000;color: #90908E;}
.bodyer11 .span3:before{background: url(./1-3.png) no-repeat;content:"";width: 17px;height:14px;display: inline-block;}
.bodyer1 ul{list-style-type:disc;font-size: 12px;line-height: 22px;padding-left: 10px;}
.bodyer2{float: right;width: 298px;}
.bodyer22{position: relative;width: 127px;float: right;padding-left: 10px;}
.bodyer22zz{position: absolute;
width: 127px;
height: 18px;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
top: 64px;
text-indent: 1px;
color: #fff;}/* 此处通过子元素绝对定位，父元素相对定位形成遮罩层 */
.bodyer22 a{display: block;font-size: 12px;color: #000;}
.bodyer22 span{width: 50%;font-size: 13px;color: #000;line-height: 24px;width: 60px;color: #90908E;}
.bodyer22 span:before{background: url(./1-3.png) no-repeat;content:"";width: 15px;height:11px;display:inline-block;}
.lastshadow{position: fixed;bottom: 6px;right: 6px;background: #000;opacity:0.2;filter:alpha(opacity=20);width: 150px;height: 100px;}
.lastpic{position: fixed;bottom: 19px;right: 19px;width: 150px;height: 100px;border: 1px #000 solid;background: #FA0606;}
</style>
</head>
<body>
<div class="all clear">
<div class="header clear">
<span class="jrtt">今日头条</span>
<span class="headqita">青春季</span>
<span class="headqita">深度</span>
<span class="headqita">热点</span>
</div>
<div class="bodyer clear">
<div class="bodyer1">
<img src="./1-1.png">
<h3>实拍二炮跨区联合演习 千里机动发射导弹</h3>
<div class="bodyer11 clear">
<span class="span1">安徽卫视</span>
<span class="span2">2,974,128</span>
<span class="span3">1,804</span>
</div>
<ul>
<li>[热点]中国将提交东海划界案 大陆延伸到冲绳海槽</li>
<li>[热点]中国将提交东海划界案 大陆延伸到冲绳海槽</li>
<li>[热点]中国将提交东海划界案 大陆延伸到冲绳海槽</li>
<li>[热点]中国将提交东海划界案 大陆延伸到冲绳海槽</li>
</ul>
</div>
<div class="bodyer2">
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
<div class="bodyer22">
<div class="bodyer22zz">
原拟10月赴华
</div>
<img src="./1-4.png">
<a href="#">最新视频</a>
<span class="span2">4,128</span>
<span class="span3">1,804</span>
</div>
</div>
</div>
<div class="lastshadow"></div>
<div class="lastpic">
</div>
</div>
</body>
</html>之前看过一篇关于定位很好的帖子，推荐给大家。http://bbs.blueidea.com/thread-2733320-1-1.html
注：透明度设置如下
标准 不透明度 opacity：0~1；
IE私有 filter：alpha（opacity=0~100）
透明度会被子元素继承，比如
<div style=” opacity: 0.5;”>
123<p>456</p>
</div>
可以发现p标签上的456也有了透明度（建议加个明显一点的背景色试试）
扫一扫
3618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
