0

I know there are lots and lots of z-indexing questions, but I cannot seem to find the one that answers this. I have an absolute div (black) that goes on top of the free flow text. I need to have another absolute div sticks at the bottom of the black div, which is already absolute. So, I decided to have a wrapper div with relative positioning, inside the black, and then add the additional absolute div (yellow) that I wanted. Just so it will be relative to the original div (black). Its kinda hard to explain with text,

.back {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 25%;
  left: 30%;
  background-color: #000;
  z-index: 10;
}

.content1 {
  position: relative;
  width: 150px;
  height: 150px;
  top: 52%;
  left: 50%;
  background-color: red;
  z-index: 9;
}

.content2 {
  z-index: -1;
  position: absolute;
  width: 125px;
  height: 125px;
  top: -30%;
  left: 0;
  background-color: yellow;
}
<div class="back">
  <div class="content1">
    <div class="content2"></div>
  </div>
</div>
<div>
  <b>Free Flow Text</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
  with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
  desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
  book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
  desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

My question is why the yellow goes on top of all the divs when its z-index: -1, shouldn't it be at the bottom?

What if I want to change the ording? Right now, it is black, red and the yellow on top. What if I want, black, yellow and then red or yellow, black and then red?

Hafiz Temuri
  • 3,882
  • 6
  • 41
  • 66
  • read until the end of the accepted answer of the duplicate to find some tricks – Temani Afif Jan 07 '21 at 08:21
  • @TemaniAfif Please enlight me how is that a duplicate?? – Hafiz Temuri Jan 07 '21 at 23:30
  • did you read it? – Temani Afif Jan 07 '21 at 23:31
  • Yes, I did. I do not have the luxury of having separate `div` like your answer explains – Hafiz Temuri Jan 07 '21 at 23:32
  • That is not what I am looking for. I want to stack the child, behind the parent. Not even closely same as your answer – Hafiz Temuri Jan 07 '21 at 23:33
  • So basically, I want the child to go wherever the parent goes, like different spots as you go from desktop to cellular devices, but I want the child to be rendered behind the parent. – Hafiz Temuri Jan 07 '21 at 23:36
  • I don't know where exactly you read that I am explaining that you need a separate div ... I never said that. Read it carefully please, It's a perfect duplicate and it contains the solution you want. – Temani Afif Jan 07 '21 at 23:36
  • @TemaniAfif Dont you have separate `div`s in your answer? `
    `     – Hafiz Temuri Jan 07 '21 at 23:39
  • I dont want to hard code these pixels, because I would not know where the parent will be – Hafiz Temuri Jan 07 '21 at 23:40
  • Plus, `transform-style: preserve-3d;` ruins my webpage – Hafiz Temuri Jan 07 '21 at 23:42
  • read it please. That doesn't make sense at all to jump and see the last snippet of my answer and hope to get a *magic* ready-to-copy-past code ... it's like watching the last 2min of a 2h film and hoping to understand it fully ... You need to read and understand – Temani Afif Jan 07 '21 at 23:42
  • @TemaniAfif Fine, I did skim through it, and I kinda have an idea about the hack you are trying to present. Which does not work in my case. Because I do not know how big the parent will be, and I want the child to go wherever the parent is. So, I cannot hard code the pixel values like you have in your hack. But I am going to read through your answer word by word. If that still does not answer my question, you will have to remove your duplicate. – Hafiz Temuri Jan 07 '21 at 23:47

2 Answers2

0

I am not sure if this is what you are looking for without knowing the exact usecase. But one way you can do it to use a wrapper div like wrappercontent1 , and but doing some change in the css you an make the red box at the top of yellow.

.back {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 25%;
  left: 30%;
  background-color: #000;
  z-index: 1;
}

.content1 {
  position: relative;
  width: 150px;
  height: 150px;
  top: 52%;
  left: 50%;
  background-color: red;
  
}


.content2 {
  z-index: -1;
  position: relative;
  width: 125px;
  height: 125px;
  top: -30%;
  left: 0;
  background-color: yellow;
}

.wrappercontent1 {
    position: relative;
    z-index: 10;
}
<div class="wrapperback">
  <div class="back">
    <div class="wrappercontent1">
      <div class="content1">
        <div class="content2"></div>
      </div>
    </div>
  </div>
</div>
<div>
  <b>Free Flow Text</b>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  <br><br><br>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Dharman
  • 30,962
  • 25
  • 85
  • 135
A Paul
  • 8,113
  • 3
  • 31
  • 61
0

The question asks for an explanation of 'why z-index is not working' in a particular scenario.

It is in fact working, but it can seem a little counter-intuitive at first - especially when one of the z-index values is negative but is shown on top of other elements.

To understand what is going on we need to consider 'stacking contexts'. A fuller explanation can be seen at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context but taking just the use of z-index in the code given we need to consider this:

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

Root element of the document (html).

Element with a position value absolute or relative and z-index value other than auto.

....several other scenarios....

Looking first at the basic case - the black square which has position absolute. It therefore forms a stacking context. It has z-index: 10 and therefore is shown above the subsequent text which is just within the root element. We get this:

enter image description here

Now let's add in the div with class content1 but without its content2 div. We get this:

enter image description here

Remember that that the div class back has formed a stacking context. It is shown above the text, and within its own context the red square is drawn. The z-index of back is not relevant to this part of the rendering - the z-index of the red square div is not compared to the z-index of its parent - we have 'started again' in a different context.

Now we introduce the yellow square, this is what we get:

enter image description here

The same thing has happened again. The z-index of the red square div is not relevant to what happens within it, we've started again so the z-index of -1 of the yellow square could just as well be 100 given there's nothing else at that level.

If you want, say, the yellow square behind the red one then you need to set things up with different stacking contexts.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Its kinda make sense, but does not really help in my case. What I am trying to do is to have this drop shadow effect on the popup, which is position absolute because it has to go on top of everything (text). Effect 2 in this example, https://codepen.io/haibnu/pen/FxGsI – Hafiz Temuri Jan 07 '21 at 07:39
  • Basically I want to add effect2 from the above link, on to a popup that is positioned absolute. – Hafiz Temuri Jan 07 '21 at 07:40
  • Hi, sorry I thought you wanted an explanation of what was happening. Could you explain more about the exact effect you want? – A Haworth Jan 07 '21 at 07:47