CODEWITHSUNDEEP
htmlcss
Mount Ain
Mount Ain

Reputation: 406

Put relative position element behind to fixed position element

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:

enter image description here

Expected Design:

enter image description here

How can I resolve it? Thank you in advance...

Upvotes: 0

Views: 310

Answers (1)

ksav
ksav

Reputation: 20831

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>

Upvotes: 1

Related Questions