CODEWITHSUNDEEP
javascriptjqueryhtmlcss
msqar
msqar

Reputation: 3020

high z-index parent with low z-index children

let me explain the situation, I got a draggable div, and whenever I start dragging, I apply some guide lines to the div. Since i want the div to be above EVERYTHING, I set a class to the div element that contains a z-index of 20000 !important.

Happens that my guide-lines are inheriting that very same z-index, and I don't want them to be above everything as its parent div.

I got something like this:

<div id="parent" style="z-index: 20000 !important; width: 100px; height: 100px;">
   <div id="guide-lines">
      <div class="guide-top"></div>
      <div class="guide-left"></div>
      <div class="guide-right"></div>
      <div class="guide-bottom"></div>
   </div>
</div>

The guide lines are lines that crosses all the browser document, like to indicate its position. But, as I said, I don't want them to be above everything.

Is there any chance to set a lower z-index? or even 0 to the guide-lines?

Thanks in advance.

Upvotes: 1

Views: 147

Answers (1)

zsaat14
zsaat14

Reputation: 1118

Z-index is relative to the parent, so if you want a child to be below the parent, you will need to use a negative z-index.

z-index:-500;

Upvotes: 1

Related Questions