有沒有什麼方法可以設置相對於靜態父元素的元素位置？

Question

我有一個靜態位置的元素，不能改變它（因爲所有會破壞）。而且我需要添加一個子元素，並且具有相對的位置。有沒有辦法做到這一點？

Answer 1

要添加相對子元素，只需製作一個相對容器並在其中添加您的子元素。

<div class="static"> 
    <div class="relative"> 
     <div class="child"></div> 
    </div> 
</div> 

.static { 
    border: 1px solid #000; 
    height: 200px; 
    position: static; 
    width: 200px; 
} 
.relative { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 
.child { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-color: #f00; 
    height: 50px; 
    width: 50px; 
    transform: translate(-50%, -50%); 
} 

我創建了一個例子給你：http://jsfiddle.net/7L6bgruh/

Answer 2

元素position: static是非 -positioned。即使該元素在正常情況下充當其包含塊，您也不能將元素相對於本身未定位的另一元素進行定位。