是否可以在同一HTML页面中多次使用相对位置信息？

Question

I am using 'position relative' and 'position absolute' on my master page. 我在主页上使用“相对位置”和“绝对位置”。

I have a page that use the above master page, And I am trying to use in this page the 'Position relative' and 'position absolute' again for 2 other elements, but the element below ('position absolute') in this page is not placed according to the element above his ('position relative') and instead it refers to the 'position relative' of the element in the master page.. 我有一个使用上述母版页的页面，并且试图在此页面中将“ Position relative”和“ position absolute”再次用于其他两个元素，但是此页面下的元素（“ position position”）是而不是根据其元素（“相对位置”）上方的元素进行放置，而是指母版页中元素的“相对位置”。

Hope is was not too clumsy explanation.. 希望不是太笨拙的解释。

Is it possible to use 'position relative' more than once on the same HTML page??? 是否可以在同一HTML页面上多次使用“相对位置” ？？？？ If so, how?? 如果是这样，怎么办？

html codes 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 codes body{ margin: 0px; CSS代码主体{边距：0像素； padding: 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

When one uses position: absolute it is calculated based on the ancestor, not sibling, so your .two and .four divs are positioned relatively to the body, not .one and .two , use this instead: 当一个使用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

Your black and green divs are occupying the exact same position, with the black one on top of the green one. 您的黑色和绿色div占据了完全相同的位置，黑色的div在绿色的div之上。

You need a better understanding of absolute and relative positioning. 您需要对absolute和relative位置有更好的了解。

Very simplistically, absolute takes the element out of the flow, and sticks it at the top left corner of the current div. 非常简单地说， absolute会将元素从流中移出，并将其粘贴在当前div的左上角。 (In fact, this is essentially correct but a little too simplistic. See the first referred article for an excellent explanation -- but what I wrote is basically correct for now.) （实际上，这本质上是正确的，但有点太简单了。请参阅第一个引用的文章以获得出色的解释-但我现在写的内容基本上是正确的。）

relative starts with the element in its normal position in the flow, but allows you to reposition the element up/down left/right of where it began. relative从元素在流中的正常位置开始的，但是允许您在元素的开始位置的上/下/上/下重新定位元素。

float:left and float:right take the element out of the normal flow, but leave it at the left margin. float:left和float:right将元素从正常流程中移出，但将其保留在左侧边缘。

Here is a jsFiddle 这是一个jsFiddle

All I changed was for the black div -- I changed top:0 to top:200px 我更改的只是黑色div-我将top:0更改为top:200px

Further Reading: 进一步阅读：

http://www.webdevbydoing.com/css/whats-the-difference-between-static-relative-absolute-and-fixed-positioning/ 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/ http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

是否可以在同一HTML页面中多次使用相对位置信息？

问题描述

2 个解决方案

解决方案1
0 2014-08-23 16:08:48

解决方案2
0 2014-08-23 16:10:55

是否可以在同一HTML页面中多次使用相对位置信息？

问题描述

2 个解决方案

解决方案1 0 2014-08-23 16:08:48

解决方案2 0 2014-08-23 16:10:55

解决方案1
0 2014-08-23 16:08:48

解决方案2
0 2014-08-23 16:10:55