Put relative position element behind to fixed position element
Question
I want to put behind the button with position relative to the div with postion:fixed . The purpose of relative position to the button is based from this answer of my previews question. From that answers, custom combo box works perfectly as I expected. But The button of the combo box is accessible while showing any pop ups & fixed position elements. For this question, I attached my study code here,
HTML:
<!DOCTYPE html>
<html lang="en">
<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;
}
Current Design:
Expected Design:
How can I resolve it? Thank you in advance...
1 answers
solution1
1 ACCPTED 2020-03-05 04:11:40
Adding a z-index will set the z-order of .sticky and its descendants.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.