将相对位置元素放在固定位置元素后面
我想把buttonwith 位置放在withrelative后面。相对位置的目的是基于我的预览问题的答案。从这个答案来看，自定义组合框按照我的预期完美地工作。但是，在显示任何弹出窗口和固定位置元素时，可以访问组合框的按钮。对于这个问题，我在这里附上了我的学习代码，divpostion:fixedbutton
HTML：
<!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
添加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>00
相关分类