Html 在图像上浮动 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18339549/
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
Floating Div Over An Image
提问by Jeremy Harris
I'm having trouble floating a div over an image. Here is what I am trying to accomplish:
我在图像上浮动 div 时遇到问题。这是我想要完成的：
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
} <div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>In this image:
在这张图片中：
I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?
我希望“特色”框浮动在图像的顶部，但它似乎“清除”浮动并导致图像换行到下一行，就好像它显示为块元素一样。不幸的是，我无法弄清楚我做错了什么。有任何想法吗？
回答by Jeremy Harris
Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:
永远不会失败，一旦我将问题发布到 SO，我就会得到一些启发性的“啊哈”时刻并弄清楚。解决方案：
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>The key is the container has to be positioned relativeand the tag positioned absolute.
关键是容器必须定位为relative，标签定位为absolute。
回答by j08691
Change your positioning a bit:
稍微改变一下你的定位：
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: green;
}
You need to set relative positioning on the container and then absolute on the inner tag div. The inner tag's absolute positioning will be with respect to the outer relatively positioned div. You don't even need the z-index rule on the tag div.
您需要在容器上设置相对定位，然后在内标签 div 上设置绝对定位。内部标签的绝对定位将相对于外部相对定位的 div。您甚至不需要标签 div 上的 z-index 规则。
回答by Thomas Cheney
Actually just adding margin-bottom: -20px; to the tag class fixed it right up.
实际上只是添加 margin-bottom: -20px; 到标签类修复它。
Being block elements, div's naturally have defined borders that they try not to violate. To get them to layer for images, which have no content beside the image because they have no closing tag, you just have to force them to do what they do not want to do, like violate their natural boundaries.
作为块元素，div 自然有定义的边界，它们尽量不违反。为了让它们为图像分层，因为它们没有结束标记，因此图像旁边没有内容，你只需要强迫它们做他们不想做的事情，比如违反他们的自然边界。
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
background-color: green;
z-index: 1000;
margin-bottom: -20px;
}
Another toue to take would be to create div's using an image as the background, and then place content where ever you like.
另一个要采取的方法是使用图像作为背景创建 div，然后将内容放置在您喜欢的任何位置。
<div id="imgContainer" style="
background-image: url("foo.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-mox-background-size: cover;
-o-background-size: cover;">
<div id="theTag">BLAH BLAH BLAH</div>
</div>
回答by user1618143
You've got the right idea. Looks to me like you just need to change .tag's position:relativeto position:absolute, and add position:relativeto .container.
你的想法是对的。在我看来，您只需要将.tag's更改position:relative为position:absolute，然后添加position:relative到.container.
回答by user1618143
you might consider using the Relative and Absolute positining.
您可以考虑使用相对和绝对定位。
`.container {
position: relative;
}
.tag {
position: absolute;
}`
I have tested it there, also if you want it to change its position use this as its margin:
我已经在那里测试过，如果你想改变它的位置，也可以使用它作为它的保证金：
top: 20px;
left: 10px;
top: 20px;
left: 10px;
It will place it 20 pixels from top and 10 pixels from left; but leave this one if not necessary.
它将放置在距顶部 20 像素和距左侧 10 像素的位置；但如果没有必要，请留下这个。
