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 :)