我有子元素需要与祖父母绝对定位.问题是父母也是绝对定位的.
我不能使用JavaScript.我怎样才能用纯CSS实现这个目标？
<div class="col-md-6 gp">
<div class="col-md-4 p">
<div class="col-md-2 c"> position me w.r.t to .gp</div>
</div>
</div>
.gp { height : 200px; position: relative; }
.p {
height : 100px; width: 250px;
position :absolute;
top : 50px; left: 50px;
}
.c { position: absolute; height: 50px; }
解决方法
如果不支持Internet Explorer 8(及以下版本),我们可以通过纯CSS来实现.以下是您应该了解的
CSS Transforms：
07001
For elements whose layout is governed by the CSS Box model,any
value other thannonefor the transform results in the creation of
both a 07002 and a 07003. The object
acts as a containing block for fixed positioned descendants.
因此,我们将一个除auto之外的值的变换添加到祖父元素中,我们将能够使用固定定位将子元素放置在创建包含块的祖父元素的方面.
例如：
.grandpa {
position: relative;
height: 500px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.dad {
position: absolute;
width: 250px; height: 250px;
bottom: 4em; left: 4em;
}
.son {
position: fixed; /* This will be positioned with the respect to the grandpa
rather than the viewport */
width: 100px; height: 100px;
top: 2em; right: 2em;
}
此外,CSS传奇Eric Mayer撰写了一篇关于此的文章：
07005
A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words,the containing block for a fixed-position descendant of a transformed element is the transformed element,not the viewport.
