绝对父母对祖父母的位置元素

Question

我有祖父母需要定位absolute的子元素。问题是父母也绝对定位。

我无法使用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> 
    </div> 
</div> 

.gp { height : 200px; position: relative; } 

.p { 
    height : 100px; width: 250px; 
    position :absolute; 
    top : 50px; left: 50px; 
} 

.c { position: absolute; height: 50px; } 

Answer 1

如果支持Internet Explorer 8（和以下）不是一个问题，我们可以通过纯CSS实现。下面是你应该知道怎么样CSS Transforms：

6 The Transform Rendering Model

对于其布局由CSS框模型制约因素，比none在创造 都变换结果的任何 值等一个stacking context和一个containing block。对象 充当包含用于固定位置的后代的块的。

因此，我们添加一个transform与其他比auto到祖父母元素的值，我们将能够使用fixed定位场所的孩子元素与尊重祖父母元素，它的创建包含块。

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传奇埃里克·梅耶写这个文章：

Un-fixing Fixed Elements with CSS Transforms

变形的元素会创建一个包含块，即使对于已设置为position：fixed的后代 也是如此。换句话说，包含变形元素的固定位置后代的 块是变形元素，而不是视口。

Answer 2

我还没有真正明白你问什么，但我编辑你的CSS：

.gp { 
    height : 200px; 
    border : 1px solid red; 
} 
.p { 
    height : 100px; 
    width: 200px; 
    border : 1px solid blue; 
    position: absolute; 
    top : 50px; 
    left : 50px 
} 
.c { 
    height : 50px; 
    border : 1px solid green; 
    position: absolute; 
    top:0; 
    left:0; 
} 

你写的定位，而不是位置。告诉我，如果它现在可行