Menu
If I make a div (at the top of the page) have a margin-top: 10px, then an absolutely positioned div (that is on a higher z-index and outside that div and outside that div's parent) starts not at top: 0px but at 10px!
http://jsfiddle.net/afv3gze7/
Why is this? Simply removing the position: relative on the body fixes everything (but causes problems with other things in my code - I need the body positioned relatively).
http://jsfiddle.net/afv3gze7/1/
Problem Code:
<!DOCTYPE html>
<html>
<head>
<style>
html
{
position: relative;
min-width: 100%;
height: 100%;
min-height:100%;
}
body
{
min-width: 100%;
min-height:100%;
font-size: 100%;
}
.outer
{
position: relative;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.overlay
{
position: absolute;
top: 0px;
left: 0em;
width: 100%;
height: 100%;
background-color: #000000;
-moz-opacity: 0.50;
-khtml-opacity: 0.50;
-webkit-opacity: 0.50;
opacity: 0.50;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:alpha(opacity=50);
z-index: 6;
display: none;
}
.inner
{
position: relative;
width: 100%;
border: none;
margin: 0em;
padding: 0em;
margin-top: 3.875em;
overflow: hidden;
z-index: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">s</div>
</div>
<div class="overlay" style="display: block;"></div>
</body>
</html>
646
This is what position: relative in CSS does. It moves the element from where it would normally render and leaves the space that it would normally occupy there. Here is more about relative positioning.
If you must keep position: relative on the body element, change the margin-top property on the .inner class to padding-top:
.inner
{
position: relative;
width: 100%;
border: none;
margin: 0em;
padding: 0em;
/*margin-top: 3.875em;*/
padding-top: 3.875em;
overflow: hidden;
z-index: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
