第六节定位详解、层级、滤镜遮罩

来源：互联网发布：centos 开启组播编辑：程序博客网时间：2024/06/09 22:38

首先解释下定位偏移量和层级的概念。定位偏移量有四个，即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）

透明度会被子元素继承，比如

123<p>456</p>

</div>

可以发现p标签上的456也有了透明度（建议加个明显一点的背景色试试）

0 0