twitter-bootstrap 如何将一个元素放在另一个元素上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17492888/
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
How to place an element over another element?
提问by Nazanin Goodarzi
I want to place a <div>over an <img>.
我想<div>在一个<img>.
The HTML looks like this.
HTML 看起来像这样。
body {
background-color: #cCa;
}
.image {
position: relative;
background-repeat: no-repeat;
}
.content {
background-color: lightGrey;
position: absolute;
overflow: none;
left: 40px;
top: 40px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="image"> <img src="css_js/img/image.jpg"> </div>
<div class="content img-circle">[content]</div>
</div>
</div>
</div>More info with pics:
带图片的更多信息：
when browser size is large
当浏览器很大时
when browser size is small.
当浏览器尺寸较小时。
回答by taylorc93
Try setting the z-indexproperty of the content divhigher than the image, like this:
尝试将z-index内容的属性设置为div高于图像，如下所示：
.content{
z-index: 3;
}
This will make it so that the content divwill be above the image. To make it get bigger as the browser gets smaller, you are going to need to use media queries. These are tags that you include in your head that will allow you to load different CSS files based on the size of the screen. Basically, you should just have larger font settings for the CSS files loaded when the screen is smaller. If you're unfamiliar with media queries, this is a good place to read up on them: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Good luck!
这将使内容div位于图像上方。为了让它随着浏览器变小而变大，您将需要使用媒体查询。这些标签包含在您的头脑中，允许您根据屏幕大小加载不同的 CSS 文件。基本上，当屏幕较小时，您应该为加载的 CSS 文件设置较大的字体设置。如果您不熟悉媒体查询，这是阅读它们的好地方：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。祝你好运！
UPDATE:
更新：
Based on your comment, you should change your code to this:
根据您的评论，您应该将代码更改为：
<div class="span12">
<div class="image">
<img src="css_js/img/image.jpg">
<div class="content img-circle">[content]</div>
</div>
</div>
This makes it so that the imgand .contentare wrapped by the .image. Then, in your CSS file, add this rule:
这使得img和.content被 包裹.image。然后，在您的 CSS 文件中，添加以下规则：
.content{
position: relative;
}
This will change the position of content relative to where the image divis located. Read up on the positionproperty to learn how to move the .contentaround. You will still need media queries to update the size/position of the divin response to the browser size changing though.
这将更改内容相对于图像所在位置的div位置。阅读该position物业以了解如何四处.content走动。您仍然需要媒体查询来更新 的大小/位置div以响应浏览器大小的变化。
