Html 在不影响设计的情况下向右浮动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/308499/
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
Float a div right, without impacting on design
提问by NikolaiDante
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
我想在我的页面顶部向右浮动一个 div。它包含一个 50 像素的方形图像，但目前它会影响页面顶部 50 像素的布局。
Currently its:
目前其：
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
我尝试了 z-index，因为我认为这就是答案，但我无法实现。
I know it's something simple I'm missing, but I just can't seem to nail it.
我知道我错过了一些简单的东西，但我似乎无法解决它。
回答by Richard Garside
What do you mean by impacts? Content will flow around a float. That's how they work.
你说的影响是什么意思？内容将围绕浮动流动。他们就是这样工作的。
If you want it to appear above your design, try setting:
如果您希望它出现在您的设计上方，请尝试设置：
z-index: 10;
position: absolute;
right: 0;
top: 0;
回答by EoghanM
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
如果您根本不希望图像影响布局（并浮动在其他内容之上），您可以将以下 CSS 应用于图像：
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relativeto that section.
如果您希望它浮动在特定父节的右侧，您可以添加position: relative到该节。
回答by nickf
Try setting its positionto absolute. That takes it out of the flow of the document.
尝试将其设置position为绝对。这使它脱离了文档流。
