是否可以在同一个html页面中使用位置相对多次？ [英] Is it possible to use position relative more than once in the same html page?
问题描述
我在我的主页上使用位置相对和绝对位置。
I am using 'position relative' and 'position absolute' on my master page.
我有一个使用上述母版页的页面，在此页面中为其他2个元素再次使用位置相对和绝对位置，但是此页面中的下面的元素（'position absolute'）不会根据其上方的元素（'position relative'）放置，而是指主页中元素的相对位置。
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..
希望是不太拙劣的解释..
Hope is was not too clumsy explanation..
是否可以在同一个HTML页面上多次使用position relative？如果是，
Is it possible to use 'position relative' more than once on the same HTML page??? If so, how??
html代码
html codes
<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;
padding：0px;
}
css codes body{ margin: 0px; padding: 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;
}
推荐答案
您的黑色和绿色div占据完全相同
Your black and green divs are occupying the exact same position, with the black one on top of the green one.
您需要更好地了解绝对和 relative 定位。
You need a better understanding of absolute and relative positioning.
很简单， absolute 离开流，并将其粘贴在当前div的左上角。 （实际上，这是基本正确的，但有点过于简单。参见第一篇引用文章的一个很好的解释 - 但我写的是基本上是正确的。）
Very simplistically, absolute takes the element out of the flow, and sticks it at the top left corner of the current 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 以流中正常位置的元素开始，但允许您将元素重新定位到开始位置的上/下左/右。
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.
float：left 和 float：right
我改变的是黑色div - 我把 top：0 改成了 top：200px
All I changed was for the black div -- I changed top:0 to top:200px
进一步阅读：
http://css-tricks.com/absolute-relative-fixed-positioining-how -do-they-differences /
这篇关于是否可以在同一个html页面中使用位置相对多次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
