絕對父母對祖父母的位置元素

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; 
} 

你寫的定位，而不是位置。告訴我，如果它現在可行