Question

我正在使用＆＃39; position relative＆＃39;并且＆＃39;绝对位置＆＃39;在我的母版页上。

我有一个使用上述母版页的页面，而我正在尝试在此页面中使用“相对位置”。并且＆＃39;绝对位置＆＃39;再次为2个其他元素，但下面的元素（＆＃39;绝对位置＆＃39;）不是根据他上面的元素（＆＃39;位置相对＆＃39;）放置的，而是指的是＆＃39;位置相对＆＃39;母版页中的元素..

希望是不是太笨拙的解释..

是否可以使用相对位置＆＃39;不止一次在同一个HTML页面上？如果是这样，怎么??

html代码

<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="basic.css">

</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>

css代码身体{ 保证金：0px; 填充：0px; }

.one{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
}

.two{
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    top: 0px;
    left: 200px;
}

.three{
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
}

.four{
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    top: 0px;
    left: 200px;
}

codepen link

Answer 1

当使用position: absolute时，它是根据祖先而非兄弟计算的，因此您的.two和.four div相对于正文定位，而不是.one和.two，请改用：

<div class="one">
    <div class="two"></div>
</div>
<div class="three">
    <div class="four"></div>
</div>

Answer 2

你的黑色和绿色div占据完全相同的位置，黑色的div位于绿色的顶部。

您需要更好地了解absolute和relative定位。

非常简单，absolute将元素从流中取出，并将其粘贴在当前div的左上角。（事实上，这基本上是正确的，但有点过于简单。请参阅第一篇推荐文章以获得出色的解释 - 但我所写的内容现在基本上是正确的。）

relative从流中正常位置的元素开始，但允许您在元素开始的位置左/右上/下重新定位元素。

float:left和float:right将该元素从正常流中取出，但将其留在左边距。

Here is a jsFiddle

我改变的只是黑色div - 我将top:0更改为top:200px

进一步阅读：

http://www.webdevbydoing.com/css/whats-the-difference-between-static-relative-absolute-and-fixed-positioning/

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

是否可以在同一个html页面中多次使用位置相对？

2 个答案: