固定一個元素的位置只在div

我有下面的代碼 - 我試圖讓「嘿！」只在白色容器內部固定。我嘗試在position:fixed,z-index中使用margin-left:0;margin-top:0來將它從紅色和黑色容器中隱藏起來，但它不起作用。固定一個元素的位置只在div

<div style="height:1000px;background:red;"> 
 
</div> 
 
<div style="height:400px;"> 
 
    <div style="position:fixed;border:thin solid blue;top:0;left:0;"> 
 
    hey! 
 
    </div> 
 
</div> 
 
<div style="height:1000px;background:black;"> 
 
</div>

來源

2017-05-26 Abhiyan Sapkota

我不明白你的問題。你想要歸檔什麼？你想讓「嘿」只在白色的東西里面滾動嗎？ –

固定位置使得元素相對於整個文檔...而不是特定的容器。你要麼使用JavaScript來解決這個問題，要麼重新思考解決方案（取決於你想實現的目標） –

固定位置使得元件留相對於整個文件...不是一個特定的容器中。你要麼使用JavaScript的這個，要麼你重新考慮解決方案（取決於你想實現什麼）

如果你真的想使用固定位置，你的red div將始終位於文檔的最頂端，可以使用類似這樣的東西

hey將始終存在（即使在紅色div和黑色div內），但它將被z-index隱藏。您還需要設置一個position上的黑色DIV所以z-index產生任何影響

body { 
 
margin:0; 
 
}

<div style="height:1000px;background:red;z-index:0;position:relative"> 
 
</div> 
 
<div style="height:400px;"> 
 

 
    <div style="position:fixed;border:thin solid blue;top:0;left:0;z-index:1;"> 
 
hey! 
 
    </div> 
 
</div> 
 
<div style="height:1000px;background:black;position:relative;z-index:2;"> 
 
</div>

來源

2017-05-26 08:12:57

固定一個元素的位置只在div

回答

相關問題