Element with absolute position styes behind the relative positioned element in a nested tree and the z-index have no effect

Question

I have a nested Table in which I have to show a Tooltip for the texts. I have extracted the problem in an jsfiddle, the problem is that I can not position the blue Element on top of the Block 2.1 Content even if i set z-index very big.

Here again the html and css code to that:

.block {
  display: block;
}

.content {
  border: 1px solid #ccc;
  padding: 2px 5px;
  box-shadow: 5px 5px 10px black;
  height: 30px;
  width: 90%;
  line-height: 30px
}

.block1_content {
  z-index: 3;
  position: relative;
  background: white;
}

.block2_content {
  z-index: 2;
  margin-left: 10px;
  position: relative;
  background: #ccc;
}

.tooltip {
  position: absolute;
  display: block;
  background: blue;
  color: white;
  height: 40px;
  width: 100px;
  z-index: 99999;
  padding: 5px 10px;
  top: 15px
}

<div class="block1 block">
  <div class="block1_content content">Block 1 Content</div>
  <div class="block2 block">
    <div class="block2_content content">
      Block2 Content
      <div class="tooltip">Tooltip</div>
    </div>
  </div>
</div>
<div class="block1 block">
  <div class="block1_content content">Block 2.1 Content</div>
  <div class="block2 block">
    <div class="block2_content content"> Block 2.2 Content</div>
  </div>
</div>

EDIT

Here a little bit complicated version of the code/problem as requested.

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — 04FS, Mar 12 '19 at 12:56
check this : https://stackoverflow.com/a/54903621/8620333 (remove z-index from .block2_content and you will have what you want) — Temani Afif, Mar 12 '19 at 12:57
@TemaniAfif thank you for the suggestion, the problem is that in my real code I need the z-index on the block2_content because I have other blocks that are under block2_content so that the block2_content would show (the box-shadow) above of the block3_content and so one. — Sheki, Mar 12 '19 at 13:44
@04FS Thank you for the link It seams to have a lot useful information but I could not fix anyway my problem with that, would you pleas try to fix the cod in my posted jsfiddle? — Sheki, Mar 12 '19 at 13:46
@Sheki So far you can't modify html structure nor elements visual depth. I don't think of any solution in CSS. Would you like a js solution? — Moorthy G, Mar 12 '19 at 14:10
@MoorthyG I was just thinking about a js solution too (My application is anyway in angular) but I wanted first to try a css solution, Thank you anyway! — Sheki, Mar 12 '19 at 14:24
Can someone explain to me the negative vote otherwise it's really not motivating to post questions on stackoverflow? — Sheki, Mar 12 '19 at 14:51

score -1 · Answer 1 · answered Mar 12 '19 at 13:04

-1

hope this helps you. thanks

.block {
  display: block;
}
.relative{
  position: relative
}

.content {
  border: 1px solid #ccc;
  padding: 2px 5px;
  box-shadow: 5px 5px 10px black;
  height: 30px;
  width: 90%;
  line-height: 30px
}

.block1_content {
  z-index: 3;
  position: relative;
  background: white;
}

.block2_content {
  z-index: 2;
  margin-left: 10px;
  position: relative;
  background: #ccc;
}

.tooltip {
  position: absolute;
  display: block;
  background: blue;
  color: white;
  height: 40px;
  width: 100px;
  z-index: 99999;
  padding: 5px 10px;
  top: 15px
}

<div class="block1 block">
  <div class="block1_content content">Block 1 Content</div>
  <div class="block2 block">
    <div class="block2_content content">
      Block2 Content
      
    </div>
  </div>
</div>
<div class="block1 block relative">
<div class="tooltip">Tooltip</div>
  <div class="block1_content content">Block 2.1 Content</div>
  <div class="block2 block">
    <div class="block2_content content"> Block 2.2 Content</div>
  </div>
</div>

answered Mar 12 '19 at 13:04

Xenio Gracias

2,728
1
9
16

You have changed the position of the tooltip, that is unfortunately not an option for me, thanks anyway for the post! The posted example was only a small part, in my real example, I have mouch complicated structure (The real example contains 4 level of nested tables with multiple texts and elements. If I move the tooltip to the parent, I would not have the position of the Element. (td) so I can show the tooltip on top of the wright element. – Sheki Mar 12 '19 at 13:38
1

If your structure is not as shown, you need to create a full [mcve] so we can understand any other factors that may be affecting the css - especially when it comes to z-indexs and the stacking context – Pete Mar 12 '19 at 14:26
@Pete here is an a little bit complicated version of my code: https://jsfiddle.net/7k2zf0c9/ So for every text (td) should be able to com a tooltip. – Sheki Mar 12 '19 at 14:38
1

@Sheki Yeah you see with that layout, I could have said straight away you will need a js solution as any css one will be a hack (to make it appear above the previous and next but the parent appearing below the next) – Pete Mar 12 '19 at 15:02

Element with absolute position styes behind the relative positioned element in a nested tree and the z-index have no effect

1 Answers1