根据其下达订单的位置
[英]positiong div according to its placing order issue
问题描述
I want to position divs according their placing order but they are not following each other. 
我想根据其放置顺序来定位div，但它们不会彼此跟随。 I want second div follow first div right after it(downwards). 我要第二个div紧随其后的第一个div（向下）。
<body>
<div id="first" style="display:block;width:20%;height:100px;position:relative;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
2 个解决方案
解决方案1
2 已采纳
You simply should delete the position:relative style in your first of your divs. 您只需在第一个 div中删除position:relative样式。
<body>
<div id="first" style="display:block;width:20%;height:100px;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
Check here: https://jsfiddle.net/dnvabqgx/1/ 检查这里： https ： //jsfiddle.net/dnvabqgx/1/
Why do position:relative matters 为什么要position:relative事项
This type of positioning is probably the most confusing and misused. 这种定位可能是最容易混淆和误用的位置。 What it really means is "relative to itself". 它真正的意思是“相对于自身”。
If you set position: relative; 如果您设置position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; 在没有其他定位属性（顶部，左侧，底部或右侧）的元素上，它完全不会影响其位置，这与将其保留为position: static;完全相同position: static;
But if you DO give it some other positioning attribute, say, top: 50p; 但是，如果你给它一些其他的定位属性，也就是说， top: 50p; as you don in your first div, it will shift it's position 50 pixels DOWN from where it would NORMALLY be. 就像您在第一个div中所做的那样， 它会将其位置从正常位置下移50个像素。
--read about all the position properties here --read所有位置的属性在这里
解决方案2
0
In response to your question of 'why position:relative matters?'; 回答您的“为什么职位：相对重要？”的问题； position relative moves an element into normal flow, allowing it to be positioned on the web page using the offset properties like top, right, bottom and down. position relative将元素移动到正常流程中，从而允许使用诸如top，right，bottom和down之类的offset属性将其定位在网页上。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.