CODEWITHSUNDEEP
htmlcssz-indexabsolute
Mala
Mala

Reputation: 14843

Absolute positioning behind non-absolute element

I have an element which contains two children, one of which is positioned absolutely. I would like this absolutely positioned element to be behind its sibling. It seems z-index does not have much of an effect. How do I accomplish this?

JSFiddle here: http://jsfiddle.net/03c3qq6w/ I want the green box to be behind the red one.

Upvotes: 2

Views: 761

Answers (1)

emmanuel
emmanuel

Reputation: 9615

Putting position: relative to #two div fix the problem: http://jsfiddle.net/03c3qq6w/1/

#two {
    position: relative;
}

In order to use z-index you have to add position to your element.

From Css-Tricks:

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

http://css-tricks.com/almanac/properties/z/z-index/

Upvotes: 3

Related Questions