最頂層 '固定' 位置的div與非位置的div移動

考慮下面的代碼：最頂層 '固定' 位置的div與非位置的div移動

div { 
 
    width:100%; 
 
    height:64px; 
 
    border:1px solid #000; 
 
} 
 

 
.top-fixed { 
 
    position:fixed; 
 
} 
 

 
.middle-fixed { 
 
    position:fixed; 
 
    top:64px; 
 
} 
 

 
.bottom { 
 
    margin-top:128px; #64+64 
 
}

<html> 
 
    <head></head> 
 
    <body> 
 
     <div class="top-fixed">Top Fixed</div> 
 
     <div class="middle-fixed">Middle Fixed</div> 
 
     <div class="bottom">Bottom</div> 
 
    </body> 
 
</html>

對於div.bottom中，我使用的margin-top屬性，以便它不重疊與最頂級的股利。但它也帶來了div.top-fixed'down'（參見小提琴）。

我該如何糾正它？有一種方法可能是使用div.bottom的padding-top屬性代替margin-top，但這聽起來並不優雅。

來源

2012-12-22 WeaklyTyped

這是一個類似的問題，回答爲什麼：http://stackoverflow.com/questions/38679945/why-do-non-positioned-non-child-divs-move-fixed-headers – steviejay

更改您的.bottom元素的CSS：

.bottom { 
    position:relative; 
    top:128px; #64+64 
}

來源

2012-12-22 08:23:27

你在上面固定股利錯過了頂部0。

試試這個

.top-fixed { 
    position:fixed; 
    top:0; 
}

來源

2012-12-22 08:24:25

添加top:0;您.TOP固定類。

來源

2012-12-22 08:31:09

最頂層 '固定' 位置的div與非位置的div移動

回答

相關問題