我想把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 关注
- 123 浏览
添加回答
举报
0/150
提交
取消