修復了與另一個 div 相關的 div
[英]Fixed div related to another div
問題描述
我想創建一個固定元素，它在向下和向上滾動時將處於相同的位置，但在調整窗口大小時也將在 x 軸上相對於不同的 div。
#blackbox { width: 500px; height: 2000px; background-color: black; color: white; margin: 0 auto; } #floater { width: 150px; background-color: blue; color: white; position: fixed; top: 50px; right: 120px; /* want here 10px on right from black box */ }
<html> <div id="blackbox"> This is blackbox <br> This is blackbox <br> This is blackbox <br> This is blackbox <br> This is blackbox <br> </div> <div id="floater"> Always 10px from black box </div> </html>
分辨率和我一樣的完美場景：
當屏幕分辨率較小時：
Whem scream 分辨率更大：
編輯：我在這里找到了解決方案。
#floater {
left: calc(50% + 510px); /* 50% + blackbox width + wanted 10px space *.
}
2 個解決方案
解決方案1
1 已采納 2016-05-31 18:02:41
一種方法是使用帶有display: table;的包裝 div display: table; 還有兩個里面有display: table-cell; .
這些“表格單元格”將並排放置，然后您可以將任何您想要的內容放入其中。
看一看：
#wrapper { display: table; } #blackbox { width: 500px; height: 2000px; background-color: black; color: white; margin: 0 auto; display: table-cell; } #floater-wrapper { display: table-cell; } #floater { width: 150px; height: 40px; background-color: blue; color: white; margin-left: 10px; margin-top: 50px; }
<html> <div id='wrapper'> <div id="blackbox"> This is blackbox <br>This is blackbox <br>This is blackbox <br>This is blackbox <br>This is blackbox <br> </div> <div id="floater-wrapper"> <div id="floater"> Always 10px from black box </div> </div> </div> </html>
解決方案2
0 2016-05-31 17:58:51
嘗試這個
#blackbox { width: 500px; height: 2000px; background-color: black; color: white; margin: 0 auto; } #floater { width: 150px; background-color: blue; color: white; position: fixed; top: 50px; left: 50%; /* want here 10px on right from black box */ }
<html> <div id="blackbox"> This is blackbox <br> This is blackbox <br> This is blackbox <br> This is blackbox <br> This is blackbox <br> </div> <div id="floater"> Always 10px from black box </div> </html>
將 div 定位在固定 div 下方和另一個固定 div 的右側
[英]Position div below fixed div and to the right of another fixed div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.