CODEWITHSUNDEEP
htmlcss
tonydev314
tonydev314

Reputation: 249

CSS positioning: absolute/relative overlay

I've created the following to illustrate my question.

#container{
    background-color:white;
    position:relative;
}
#absolute{
    position:absolute;
    height:100%;
    width:100%;
    background-color:black;
}

#relative{
    position:relative;
    background-color:blue;
    width:200px;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content"></div>
	</div>
</div>

So I understand the following: 1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.

2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.

What I don't understand is: 1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through. 

#container{
    position:relative;
}

#absolute{
    position:absolute;
    height:90%;
    width:100%;
    background-color:black;
    z-index:1;
}
#relative{
    //position:relative;
    background-color:blue;
    width:200px;
    z-index:2;
    color:white;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content">Test</div>
	</div>
</div>

2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.

#container{
    background-color:white;
    position:relative;
}
#absolute{
    position:absolute;
    height:100%;
    width:100%;
    background-color:black;
    color:white;
    z-index:2;
}

#relative{
    position:relative;
    background-color:blue;
    width:200px;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute">
        Test<br/>Test<br/>Test<br/>Test
	</div>
	<div id="relative">
		<div id="content"></div>
	</div>
</div>

Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.

Upvotes: 2

Views: 17320

Answers (1)

maioman
maioman

Reputation: 18734

To answer the first question :

If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.

It's because default position is position:static and that means ingnoring all positioning instructions including z-index,

in this case if you set #absolute with z-index negative value it will go on a lower layer:

#container{
    position:relative;
}

#absolute{
    position:absolute;
    height:90%;
    width:100%;
    background-color:black;
    z-index:-11;
}
#relative{
    //position:relative;
    background-color:blue;
    width:200px;
    z-index:2;
    color:white;
}

#content{
    background-color:green;
    height:50px;
    width:50px;
}
<div id="container">
	<div id="absolute"></div>
	<div id="relative">
		<div id="content">Test</div>
	</div>
</div>

as to question 2:

with height:100% it expands to height of parent;

Upvotes: 3

Related Questions