Menu
First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77
Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?
818
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
The reason for this behavior is due to the natural stacking order on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom. Even if elements don't have their z-index set, there is a rhyme and reason to which ones will be on top.
Understand how stacking works, and use the rules to your advantage to avoid using z-index , as long as it makes sense. Keep z-index values low: you'll rarely need more than z-index: 1 (or less than z-index: -1 ) Create stacking contexts to keep things boxed and prevent them from interfering with each other.
Definition and Usage An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
There's actually two reasons:
Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.
A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
