CSS 我可以结合 position: relative 和 float: left 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2635426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I combine position: relative and float: left?
提问by Randy Mayer
Can I apply both position: relativeand float: lefton one element? Like this:
我可以同时应用position: relative和float: left一个元素吗？像这样：
div {
float: left;
position: relative;
top: 0px;
left: 0px;
}
回答by Jonatan Littke
Yes.
是的。
"Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning"
“一旦一个盒子按照正常流程布局或浮动，它可能会相对于这个位置移动。这称为相对定位”
回答by Pekka
Could I apply position relative and float left on one element?
我可以在一个元素上应用相对位置和左浮动吗？
Yes. Try it out.
是的。试试看。
回答by Termato
I want to provide a different answer in case it may help someone. I had two side by side div's that I wanted them to take up space:
我想提供一个不同的答案，以防它可能对某人有所帮助。我有两个并排的 div，我希望它们占用空间：
<div class="col-md-12">
<div class="col-md-6">stuff</div>
<div class="col-md-6">other stuff</div>
</div>
I used to do this by applying <div class="clear"></div>after all my floating ones. This used to work because .clear { clear: both; }would solve the problem. This no longer works for me. Instead, I followed these instructionsand added this class to my container:
我曾经通过<div class="clear"></div>在我所有的浮动之后申请来做到这一点。这曾经有效，因为.clear { clear: both; }可以解决问题。这不再适用于我。相反，我按照这些说明将这个类添加到我的容器中：
.noFloat {
width: 100%;
overflow: auto; //If you get a scroll bar, try overflow: hidden;
float: none;
}
so I ended up with:
所以我结束了：
<div class="col-md-12 noFloat">...</div>
Here is a link to a bootply.com example: http://www.bootply.com/EupCHRhV4s
这是 bootply.com 示例的链接：http: //www.bootply.com/EupCHRhV4s
回答by aholub
The answers that claim that you can combine float and position are actually incorrect. Yes, the position of the floating div will indeed move, but the surrounding text will not flow as you expect. The problem is that the position attributes effectively leave a white box where the div that you're floating used to be, then moves the div elsewhere, leaving the box behind. Put another way, you'll be positioning your div on top of the text, when what you probably want is for the text to flow around the div in its new position.
声称可以组合浮动和位置的答案实际上是不正确的。是的，浮动 div 的位置确实会移动，但是周围的文本不会像您预期的那样流动。问题是位置属性有效地在您浮动的 div 所在的位置留下了一个白色框，然后将 div 移动到其他地方，将框留在后面。换句话说，您将把 div 定位在文本的顶部，而您可能想要的是文本在新位置围绕 div 流动。
Here's an example of a div that has a simple float:right
这是一个具有简单浮点数的 div 示例：对
Here's an example of the same div, but with position:relative; and top:.75in; added:
这是相同 div 的示例，但带有 position:relative; 和顶部：.75 英寸；添加：
Note how the box is now sitting on top of the text. That's probably not what you want!
请注意该框现在如何位于文本顶部。这可能不是你想要的！
回答by Sarower Jahan
Yes, You can use both.
是的，您可以同时使用两者。
You will use float:leftto position element to left side and permit next element to position right side of this.
您将使用float:left将元素定位到左侧并允许下一个元素定位到它的右侧。
position:relativewill affect itself and it's children, to take own position. when you will use left:npx;top:npxit will move this element left,right,top and bottom.
position:relative会影响自己和它的孩子，采取自己的立场。当你使用left:npx;top:npx它时，它会向左、向右、顶部和底部移动这个元素。
You can check this demo: jsfiddle link
您可以查看此演示：jsfiddle 链接
