Issue
I have this code that I don't really understand why it works:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#divWraper
{
position: relative;
}
#divBig
{
width: 500px;
height: 300px;
background: Green;
border: 1px dashed yellow;
}
#divSmall
{
position: absolute;
bottom: 0;
left: 0px;
width: 500px;
height: 100px;
background: Red;
z-index: 200;
opacity: 0.5;
filter: alpha(opacity = 50);
}
</style>
</head>
<body>
<div id="divWraper">
<div id="divBig"></div>
<div id="divSmall"></div>
</div>
</body>
</html>
How does, this style makes the layout "work" (if I omit it, it brakes the layout):
#divWraper
{
position: relative;
}
I thought this is just for positioning the outer div , but it also effects the children...
Please provide a clear explanation :)
Solution
When you use position:absolute on an element, the top, left, right and bottom properties are based on the nearest positioned parent element, or to document body if there are none.
Take the following example:
<div id="parent" style="position:relative">
<div>blah</div>
<div id="wrapper">
<div style="position:absolute">Here is some more content<div>
</div>
</div>
The absolute positioned div here will be positioned relative to the div with the parent id, because that is the nearest positioned element. If I add style="position:relative" to the id="wrapper" div, it will be positioned relative to that div instead.
Answered By - Andy E
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.