繼承位置絕對

.Wrap 
 
{ 
 
    height:500px; 
 
    width:500px; 
 
    border:2px solid #000; 
 
} 
 
.container 
 
{ 
 
    margin-left:100px; 
 
    margin-top:100px; 
 
    width:300px; 
 
    height:300px; 
 
    background-color:grey; 
 
    } 
 
.box 
 
{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:red; 
 
    position:absolute; 
 
    top:15px; 
 
    left:15px;

<div class="Wrap"> 
 
    <div class="container"> 
 
    <div class="box"> 
 
     </div> 
 
    </div> 
 
    </div>

難道class="box"只有class="container"的孩子呢？我的意思是從「容器」繼承絕對位置，但不是從「包裝」。

來源

2016-11-11 PiotrS

你想紅盒子放在灰盒子裏面？ –

是的，給容器'position：relative;' – LGSon

'.box'的位置將基於第一個（非靜態）定位的父元素。既然'.container'和'.Wrap'沒有被定位（也就是說，它們的默認'position：static;'），它可能就是'.box'位置所涉及的'body'。 – connexo

到box相對位置的container您無論是在container設置position: relative;，或者，如下面的示例中，除去left/top在box

要注意，刪除left/top可以提供一些不可預知的結果，因爲您將瀏覽器的控制權解釋爲如何定位box。

.Wrap { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: 2px solid #000; 
 
} 
 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    margin-top: 100px; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: grey; 
 
} 
 
.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: absolute; 
 
}

<div class="Wrap"> 
 
    <div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-11 17:44:33 LGSon

如果他仍然需要「定位」'.box'，他總是可以使用margin而不是'top'和'left'。 – connexo

@connexo是的，這是非常真實的，但它仍然可以給出從何處開始的不可預知的結果，因爲它將取決於瀏覽器 – LGSon

繼承位置絕對

回答

相關問題