定位层叠关系

《定位层叠关系》由会员分享，可在线阅读，更多相关《定位层叠关系（6页珍藏版）》请在装配图网上搜索。

1、2010-03-18css 层的定位 position、absolute、relative 层叠加的五条叠加法则文章分类:Web前端1. 静态定位：position:static （为position属性的默认值）。2. 动态定位:position:relative或position:absolute或position:fixed。3. 祖元素：任意包含该元素的元素。4. 父元素：直接包含该元素的祖元素。5. 同辈元素：拥有共同的父元素的元素。引用: 其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下 在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关

2、系。 到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包 括： div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4； div#b_inner4 的祖元素包括： div#b,div#b_inner1,div#b_inner2,div#b_inner3。然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态 定位的元素有： div#a,div#a_inner3；div#b_inner4 的祖元素中含有动态定位 的元素有： div#b_inner3。然后再拿出最高级进行比较：

3、div#a #div#b_inner3。父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态 布局时，其比较已经与 position:static 无关，而其祖元素却可以通过 html 的 位置来进行比较。法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。则二：同辈元素同为动态定位时，且有 z-index 设置时， z-index 值大者居上。.div1posiiion.relative: z-ind&r2.disposition-relative: z-index: 1 j法则三：同辈元素定位方式不同时，动态定位居上。法则四：非同辈元素，任意一者及

4、其祖元素不具备动态布局时，html靠后者居 上。法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自 向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身） 进行比较。情况 1：子元素的 z-index 无论多大，父元素大者居上。情况 2：父元素居下，子元素也可以居上。.pare ntDk t；position:sta itc.div1position:relatkejdiv2position:staitcparentD i?2p osition:sta itc情况1、情况2结合扩展比较。引用: 其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

5、 在这个例子中，我们来比较 div#a_inner5 和 div#b_inner4 的层叠关系。 到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包 括：div#a,div#a_innerl,div#a_inner2,div#a_inner3,div#a_inner4； div#b_inner4 的祖元素包括： div#b,div#b_inner1,div#b_inner2,div#b_inner3。然后分析它们的祖元素中具有动态定位的： div#a_inner5 的祖元素中含有动态 定位的元素有： div#a,div#a_inner3； div#b_inne

6、r4 的祖元素中含有动态定位 的元素有： div#b_inner3。然后再拿出最高级进行比较： div#a #div#b_inner3。父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态 布局时，其比较已经与 position:static 无关，而其祖元素却可以通过 html 的 位置来进行比较。absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。 假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会 相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内 补丁( padding )和边框( b

7、order )。要激活对象的绝对(absolute)定位，必须指定left , right , top , bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们 的默认值 auto ，这将导致对象遵从正常的 HTML 布局规则，在前一个对象之后 立即被呈递。TRBL 属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了 position 属性才有效。 当设定 position:absolute如果父级(无限)没有设定position属性，那么当前的absolute则结合TRBL 属性以浏览器左上角为原始点进行定位如果父级(无限)设定posit

8、ion属性，那么当前的absolute则结合TRBL属性 以父级(最近)的左上角为原始点进行定位。当设定 position: relative则 参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者 说相对于被定位元素在父级内容区中的上一个元素进行偏移)，无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否 进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率 的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分 辨率的变化

9、而变化位置。有时还需要依靠 z-index 来设定容器的上下关系，数值 越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是 无法用 z-index 来设定上下关系的，一定是子级在上父级在下。设置此属性值为relative会保持对象在正常的HTML流中，但是它的位置可以 根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占 有他们自己的空间 而不会覆盖被定位对象的自然空间。与此不同的，在绝对 (absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会 占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动 条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其 实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在 文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。