× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

In CSS, the 'z-index' property will have no effect if the element has no specific 'position'

sheriffderek
Jan 08, 2017
<p>You might see a lot of CSS like this:<br>  </p> <p><span style="color:#0000FF">.someThing {<br>   ...<br>   z-index: 99999;<br> }</span></p> <p> </p> <p>You can tell that <em>someone</em> got frustrated. They were likely trying to get an element to sit on-top of another. The z-index property works like a 'stack' of paper... you don't need to say that something is 99998 pages higher up in the stack... that's a <em>little</em> overkill.<br> <br> For z-index to work, you must set a position property, and in general, you'll only be using it once or twice in your application - <em>assuming you have thoughtful markup. </em>Things like headers that stay in place can be z-index: 10 or something. That will give you plenty of room to adjust the stack. If you are using lots of z-index rules, you need to take some time to look at your markup and think about why. Elements below one another in markup are already 'higher' than the one before.</p> <p> </p>
comments powered by Disqus