html – 相对于祖父母的位置元素在绝对父级内

概述我有子元素需要与祖父母绝对定位.问题是父母也是绝对定位的. 我不能使用JavaScript.我怎样才能用纯CSS实现这个目标？ JSFiddle Demo <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> 我有子元素需要与祖父母绝对定位.问题是父母也是绝对定位的.

我不能使用JavaScript.我怎样才能用纯CSS实现这个目标？

JSFiddle Demo

<div >    <div >        <div > 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 than none for 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之外的值的变换添加到祖父元素中,我们将能够使用固定定位将子元素放置在创建包含块的祖父元素的方面.

EXAMPLE HERE

例如：

.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.

总结

以上是内存溢出为你收集整理的html – 相对于祖父母的位置元素在绝对父级内全部内容，希望文章能够帮你解决html – 相对于祖父母的位置元素在绝对父级内所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。