1

I have googled a lot and am here to seek some expert's suggestion on this issue am facing.

The header has a css below -

.head {
  position: fixed;
  z-index: 1;
}

and the content on the page DIV has a form with a tooltip in some of it's fields with below css on the tooltip - 

<div class="sample">
     <input type="text">
     <div class="tooltip" style="top: -44px; left: 1228px; 
      display: block;">
       <div class="downarrow"></div>
       <div class="inside">Sample tooltip text goes here!!!</div> 
     </div>
</div>

and the css -

 .tooltip{
   position: absolute;
   z-index: 1070;
 }

Now, from my knowledge the stacking goes like fixed, absolute and then relative(please correct me if wrong). which is why my tooltip goes under the header div. But, is there any way to make the tooltip come on top?

Appreciate your responses. I have pretty much hit a wall in finding a solution without making layout changes and hence the post.

Update: CodePen: https://codepen.io/anon/pen/VVJpzw

  • https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – redditor Dec 05 '18 at 17:30
  • 2
    Please provide your page html and the required subset of css in a fiddle or codepen so that we can see the stacking contexts, which is not possibly to tell with just the
    that contains a tooltip. The subset of css should include all the classes with position fixed, and all classes with position absolute or relative that have a z-index value other than auto.
     – Ben Sewards Dec 05 '18 at 17:50
  • added a codepen illustrating the div structure and css –  Dec 05 '18 at 20:14

2 Answers2

2

Remove z-index: 0 from your .main css class, instead of removing position relative. If you just remove position relative or z-index, you are dismissing the stacking context (reference) in this main section, but there are still more use cases for having position: relative than a z-index (absolute positioned elements contained inside). You do not want to create a stacking context on your main section in cases where the Header has something like a mega menu/drop down navigation, otherwise those menus will display underneath the main section.

If you need any sort of structure in the main section, create child items of .main so that the stacking context starts there instead of on the same level as the header.

Ben Sewards
  • 2,571
  • 2
  • 25
  • 43
  • Actually this worked perfectly. Removing position: relative did not work, but z-index removal worked like charm! thank you, for the reference link @Ben Sewards. –  Dec 12 '18 at 16:22
1

Just remove position: relative property of .main class, because of relative parent it's not going out.

.main {
  padding-top: 100px;
  flex: 1 0 auto;
  display: block;
  [position: relative;] -------> remove this line.
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50vh;
  box-sizing: border-box;
  z-index:0;
}
Paurnima Partole
  • 71
  • 5
  • 1
    for some reason this did not work when I tried it in my page. removing the z-index from .main class is what worked. probably there were other elements impeding this from working. But I'll remember to watch out for this in future. thank you, @Paurnima Partole –  Dec 12 '18 at 16:19