影響內部絕對定位元素的固定元素頂部屬性

我爲導航欄創建了一個漢堡圖標。外部容器固定，絕對定位內部條。問題是，當我將top屬性應用到外部固定元素時，它會影響內部條的高度。爲什麼會發生這種情況，我該如何阻止它？影響內部絕對定位元素的固定元素頂部屬性

下面是我創建了一個小演示：

div{ 
 
    position: fixed; 
 
    /*top: 3.4em; /*uncomment this to see the problem*/ 
 
    right: 5em; 
 
    height: 2em; 
 
    width: 2em; 
 
    cursor: pointer; 
 
    z-index: 50; 
 
    background-color: #ffffff; 
 
    border: 0.063em solid #ff6633; 
 
    border-radius: 0.313em; 
 
} 
 

 
span{ 
 
    display: block; 
 
    position: absolute; 
 
    height: 0.2em; 
 
    width: 1.5em; 
 
    background-color: #ff6633; 
 
    left: 0.25em; 
 
} 
 

 
span:nth-child(1){ 
 
    top: 0.25em; 
 
} 
 

 
span:nth-child(2){ 
 
    top: 0.863em; 
 
} 
 

 
span:nth-child(3){ 
 
    top: 1.438em; 
 
}

<div> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

https://jsfiddle.net/ezp43625/

來源

2017-06-22 Reece

它工作正常 –

您是否嘗試取消註釋頂部屬性以查看問題？ – Reece

嘗試在'pixels' –

這似乎是一個瀏覽器中呈現的問題。如果放大或檢查高度，則顯示三條線的高度相同。所以可能你可以嘗試改變頂部偏移量。對我來說，它看起來不錯

top: 3.5em

來源

2017-06-22 09:51:33

是的，我注意到它可以很好地處理不同的頂級屬性。但它在我的網站上相當煩人，因爲它不會讓我正確地對準酒吧 – Reece

影響內部絕對定位元素的固定元素頂部屬性

回答

相關問題