问题描述
如果我使一个div（在页面的顶部）有一个 margin-top：10px ，那么一个绝对定位的div在 top：0px 但不是 10px $ c>！
为什么？简单地删除身体上的位置：relative 修复了一切（但在我的代码中导致其他问题 - 我需要相对的身体）。
：
<！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 =overlaystyle =display：block;>< / div>
< / body>
< / html>
相对在CSS中。它从正常渲染的位置移动元素，并留下它通常在那里占据的空间。这里是。
如果您必须在body元素上保留 If I make a div (at the top of the page) have a Why is this? Simply removing the http://jsfiddle.net/afv3gze7/1/ Problem Code: This is what If you must keep 这篇关于为什么要使body标签的样式“position：relative”导致绝对位置的div开始下降？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ position：relative ，请更改 margin-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;
}
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!position: relative on the body fixes everything (but causes problems with other things in my code - I need the body positioned relatively).<!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>
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.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;
}