Menu
I have two elements in the same container, the first has position: absolute, the second position: relative. Is there a way to set the "z-index" of an absolute element so that its in the background? The relative positioned element should be on the top (z-layer) because it holds links...
Here is a JSFiddle: http://jsfiddle.net/8eLJz/
The absolute positioned element is on the top of the z-layer and I have no influence with the z-index-property. What can I do?
819
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
If you position it as absolute , then you're positioning it relative to its closest ancestor which is fixed or relative ... Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper's page box.
I'm not sure which one you want in front, but you just need to set position on both and set z-index on both. http://jsfiddle.net/8eLJz/2/
a { color: black; } nav#mainNav { position: relative; } nav#mainNav > img { position: absolute; width: 100px; left: 0; z-index: 5; } nav#mainNav > a > img { width: 100%; } nav#mainNav > nav { width: 100%; position: relative; z-index: 10; } nav#mainNav > nav > a { display: block; text-align: right; background-color: yellow; } 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
