您现在的位置: 365建站网 > 365学习 > 关于div的相对定位和z-index堆放次序的理解

关于div的相对定位和z-index堆放次序的理解

文章来源:365jz.com     点击数:279    更新时间:2011-06-11 21:03   参与评论

     我上一章写了《谈谈我从事web前端设计对div绝对定位的心得》这个,有朋友说想要把相对定位也讲一下,正好中午无事,特写出来供大家指正。

     关于定位的元素,大家知道是一个通用的position,相对定位relative只是定位中的一个属性,我的理解是:相对定位不是相对于其他元素,而是被相对于被包含块(子元素)。如果只定义一个position:relative;这个不会产生太大的效果,但是它的本质已经变了,从网页内变到了“网页外”。为什么这么说呢?我去年做一个朋友的广告,发现运用了position的块竟然能够遮挡住网页内的漂浮广告,还有运用了这个元素的块明显加载比较快,我又实验了几次都会出现这种情况,在此之前我真的对position的这个效果一点都不理解,后来我找了我经常看的书,上面是这样描述的:“相对定位(relative):元素可以在文档流中的位置进行定位。”基于这个我实验了下,代码如下:

1 .relative
2 {
3 position:relative;
4 left:-50px;
5 right:-40px;
6 background-color:#ccc;
7 }

    居然ok可以定位,但它和绝对定位的区别就在于它不是基于包含块(父元素)来定位的,它是基于自己原来所在文档流中的位置来定位的。所以我认为它已经半脱离了网页,它是浮在网页之上的,但是又占据着文档流中的位置。

    大家可以试验一下,下面我想讲的是我对z-index堆放次序的理解:

     z-index属性允许决定元素的堆放次序。z指的是z轴,它说明不是处理左右定位(X轴)或者上下定位(Y轴),而我理解它好像就是使用3D效果那样,可以重叠堆放一层一层的摞起来。当元素重叠而且标记流内置的默认堆放设置无法实现的效果时,z-index很重要,因为这是在使用绝对定位时非常常见。

     对于z-index可以使用两种值:

     1.整数(0、1、2、3)

      2.out

      out值是默认的一个值,这个值只用来覆盖在CSS中其他地方声明的另一个样式。不过很多时候我使用的是整数。

      在使用整数时,z-index的值最高的那个要出现在比这个值低的元素上面。打个比方来说手里拿了10张扑克,最上面的是10,最下面那个是1就行了。在一个包含块中,z-index值为1的元素总在值为10的元素的下面,也就是说值最大的永远排在最上面。

      举个例子,代码如下:

1 <div id="product">
2 <div id="sale-price"></div>
3 <div id="product_photo"></div>
4 </div>

相对应的css

 1 #product
 2 {
 3 position:relative;
 4 }
 5 #sale-price
 6 {
 7 position:absolute;
 8 z-index:2;
 9 }
10 #product_photo
11 {
12 position:absolute;
13 z-index:1;
14 }

     如果这两个元素定位的位置相互重叠的话,z-index值最高的#sale-price元素出现在#product_photo的上面。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (279人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------