將ABSOLUTE位置轉換爲FIXED

Question

我有一個帶有工具提示的div，我必須將它從絕對位置轉換爲固定位置。

當我只是改變屬性，它只是變成奇怪的隨機位置。

我應該如何跟蹤它？

Answer 1

您絕對定位的元素是根據最後一個相對定位的祖先的位置定位的。看下面的代碼片段。固定只是基於窗口本身。如果您想查找需要設置固定位置的座標，則需要使用JavaScript來獲取這些座標。

.relative { 
 
    position:relative; 
 
    margin-top:80px; 
 
    margin-left:120px; 
 
    background:#CCC; 
 
    } 
 

 
.absolute { 
 
    position:absolute; 
 
    top:20px; 
 
    left:40px; 
 
    background:#888; 
 
    color:white; 
 
} 
 

 
.fixed { 
 
    position:fixed; 
 
    top:20px; 
 
    left:40px; 
 
    background:#333; 
 
    color:white 
 
}

<div class="relative"> 
 
    <p>I'm positioned relatively. The absolute div will be positioned relatively to me.</p> 
 
    <div class="absolute"> 
 
    <p>I'm offset from my relatively-positioned parent</p> 
 
    </div> 
 
    <div class="fixed"> 
 
    <p>I'm a child of the relative position, but I'm fixed so I'm offset from the window</p> 
 
    </div> 
 
</div>