我想把buttonwith 位置放在withrelative后面。相對位置的目的是基于我的預覽問題的答案。從這個答案來看，自定義組合框按照我的預期完美地工作。但是，在顯示任何彈出窗口和固定位置元素時，可以訪問組合框的按鈕。對于這個問題，我在這里附上了我的學習代碼，divpostion:fixedbuttonHTML：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body> <div class="sticky"> <div class="fixed"> </div> </div> <div class="elements"> <button>I should behind this green wall!</button> </div></body></html>CSS： html,body{ min-height: 100%; } body{ margin: 0; background-color: rgb(233, 233, 233); } .sticky{ position: sticky; height: 40px; width: 100%; background-color: orange; } .fixed{ position: fixed; margin-top: 40px; height: 100%; width: 100%; background-color: rgba(34, 138, 34, 0.555); } .elements{ background-color: rgb(231, 77, 39); } .elements button{ position: relative; }當前設計：預期設計：我該如何解決？先感謝您...
1 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
添加z 索引.sticky將設置及其后代的 z 順序。
html,
body {
? min-height: 100%;
}
body {
? margin: 0;
? background-color: rgb(233, 233, 233);
}
.sticky {
? position: sticky;
? height: 40px;
? width: 100%;
? background-color: orange;
? z-index: 1;
}
.fixed {
? position: fixed;
? margin-top: 40px;
? height: 100%;
? width: 100%;
? background-color: rgba(34, 138, 34, 0.555);
}
.elements {
? background-color: rgb(231, 77, 39);
}
.elements button {
? position: relative;
}
<div class="sticky">
? <div class="fixed">
? </div>
</div>
<div class="elements">
? <button>I should behind this green wall!</button>
</div>
- 1 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消