When using CSS “position:absolute;” statements for a nested <div> element, be mindful which parent <div> is used for anchoring.
For example:
<html>
<head>
<style>
#outer {
width:800px;
height: 400px;
background-color: red;
}
#inner {
width:500px;
height: 250px;
background-color: blue;
}
p {
bottom: 75px;
color: #FFFFFF;
font-size: 12px;
left: 0;
margin: 0px;
padding: 5px 12px;
position: absolute;
background-color: green;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="/picture.jpg">
<p>This is a picture</p>
</div>
</div>
</body>
</html>
The above HTML code results in the following web page content:
Absolute positioned elements (“position: absolute;”) are anchored to the first non-static parent container element. So if the parent container is a <div>, you have to explicitly state “position: relative;” for it to be used as the container for the absolute positioned child. Otherwise the absolute positioned element will anchor to a next parent up the chain. The effect (as we saw in the example above) is often that the absolute positioned item appears “outside” of the div that contains it (i.e. the page itself)
<html>
<head>
<style>
#outer {
width:800px;
height: 400px;
background-color: red;
}
#inner {
width:500px;
height: 250px;
background-color: blue;
position: relative; <!--- FIX -->
}
p {
bottom: 75px;
color: #FFFFFF;
font-size: 12px;
left: 0;
margin: 0px;
padding: 5px 12px;
position: absolute;
background-color: green;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="/picture.jpg">
<p>This is a picture</p>
</div>
</div>
</body>
</html>
The above HTML code results in the following:
Easy.