CSS Z-Index not working on absolute positioning

Question

I have the following situation: There are several div containers in my code.

.outside {
  position: relative;
  z-index: 1;
}
.options {
  position: absolute;
  z-index: 999;
}

<div class="outside">
  <div class="inside">
    <div class="options">Content</div>
  </div>
</div>

The Selection of three divs above is repeated several times. The problem i have now is that the outside div will overlap the options div. I tried to set this up with the z-index but it is not working. Does anyone have a solution for this?

can you create a fiddle? I think we will be able to help you quickly if we have something functioning to play with. — oompahlumpa, Dec 20 '16 at 18:11
Does this answer your question? [z-index Not Working with Absolute Position](https://stackoverflow.com/questions/39632360/z-index-not-working-with-absolute-position) — Mohammad Ayoub Khan, Mar 26 '21 at 17:43

Ionut Necula · Accepted Answer · 2016-12-20T18:15:55.910

2

Move position:relative; and the z-index from .forum_post_outside to .forum_arrow_outside, also remove position: absolute; from .forum_arrow_outside, also added float: right; to .forum_arrow_outside:

.forum_post_outside {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  min-height: 75px;
  padding: 0 5px;
  width: 100%;
  background-color: #333;
  margin-bottom: 2px;
}
.forum_arrow_outside {
  position: relative;
  z-index: 1;
  float: right;
  width: 150px;
}
.forum_arrow_top {
  position: absolute;
  top: 0;
  right: 0;
}
.forum_arrow_inside {
  max-width: 110px;
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.forum_drop_down {
  margin: 0!important;
  margin-top: 10px!important;
  line-height: 20px;
  min-width: 110px;
  border-bottom: 1px solid #ccc;
  color: #000;
  
}

<div class="forum_post_outside">
  <div class="forum_arrow_outside">
    <div class="forum_arrow_inside">
      <div class="forum_drop_down">
        <img src="/images/delete_16.png">Delete</div>
      <div class="forum_drop_down">
        <img src="/images/unpin-16.png">Unpin</div>
      <div class="forum_drop_down">
        <img src="/images/edit_16.png">Edit</div>
    </div>
  </div>
</div>

<div class="forum_post_outside">

</div>

<div class="forum_post_outside">

</div>

edited Dec 20 '16 at 18:15

answered Dec 20 '16 at 17:44

Ionut Necula

11,107
4
45
69

Thank you for your reply. I tried it but it is still not working. – Dennis Dec 20 '16 at 17:49
@Dennis, what are you trying to do exactly? You see that when you run the snippet it works. So please describe your actual problem better, or make a http://jsfiddle.net with the full code to replicate the problem so I can help you. – Ionut Necula Dec 20 '16 at 17:50
Please note, that the arrow divs are displayed via javascript. I didn't add the js code to the fiddle and only displayed the arrow divs in the first outside div to show that it is overlapped by the following outside divs. – Dennis Dec 20 '16 at 18:03
@Dennis, ok. So what is the actual problem? How should the output look? What is the problem? You want to see the whole Delete, Unpin etc? – Ionut Necula Dec 20 '16 at 18:06
The Problem is that the forum_arrow_outside div is overlapped by the following forum_post_outside div. I would like the forum_arrow_outside div to be above all of the rest of the content and not to be overlapped by anything. Thank you. – Dennis Dec 20 '16 at 18:14
@Dennis, check my updated answer. Is that what you need? – Ionut Necula Dec 20 '16 at 18:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131082/discussion-between-ionut-and-dennis). – Ionut Necula Dec 20 '16 at 18:20
Perfect! This is exactly what i needed. I have been trying to fix this for hours. Thank you so much!!! – Dennis Dec 20 '16 at 19:53

CSS Z-Index not working on absolute positioning

1 Answers1