Overlapping select options with absolute div

Question

I have a problem with my select box is that my options overlap with the green div even if I use a high Z-index :

.my-navbar {
  position: fixed;
  width: 500px;
  height: 40px;
  background-color: orange;
}

.my-div1 {
  position relative;
}

.my-div1 {
  position absolute;
  height: 100px;
  width: 120px;
  background-color: green;
  z-index: 1000;
}

.my-main {
  padding-top: 50px;
}

.my-select {
  width: 150px;
  margin-left: 30px;
  z-index: 1;
}

<div class="my-navbar">
   <div>My navbar</div>
  <div class="my-div1">
     <div class="my-div2">
       <ul>
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
       </ul>
     </div>
  </div>
</div>

<div class="my-main">
  <select class="my-select">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

My green div has an absolute position but why z-index not working in this case ?

The example below is just a prototype and really the green div is displayed in hover, it is a menu element but if I click on the select box and I display the green div, it overlapped by the select options

take a look at this I think it might help you : https://stackoverflow.com/questions/9210725/html-select-drop-down-option-z-index — Patrick Hume, Jul 29 '22 at 20:32

score 0 · Answer 1 · answered Jul 29 '22 at 22:05

If I understand correctly what you want to do, to make work z-index, you need set position property and give it a value.

https://www.w3schools.com/css/css_positioning.asp

.my-navbar {
  position: fixed;
  width: 500px;
  height: 40px;
  background-color: orange;
}

.my-div1 {
  position relative;
}

.my-div1 {
  position absolute;
  height: 100px;
  width: 120px;
  background-color: green;
  z-index: 1000;
}

.my-main {
  padding-top: 50px;
}

.my-select {
  width: 150px;
  margin-left: 30px;
  z-index: -1;
  position: relative; /* added position on your select */
}

<div class="my-navbar">
   <div>My navbar</div>
  <div class="my-div1">
     <div class="my-div2">
       <ul>
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
       </ul>
     </div>
  </div>
</div>

<div class="my-main">
  <select class="my-select">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

Overlapping select options with absolute div

1 Answers1