如何将元素放在另一个元素上?

时间:2013-07-05 16:00:43

标签: html css css3 twitter-bootstrap

我想在<div>上放置<img>

HTML看起来像这样。

&#13;
&#13;
body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}
&#13;
<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>
&#13;
&#13;
&#13;

pics的更多信息:

浏览器尺寸较大时 enter image description here

浏览器尺寸较小时 enter image description here

1 个答案:

答案 0 :(得分:41)

尝试将内容z-index的{​​{1}}属性设置为高于图片,如下所示:

div

这将使内容.content{ z-index: 3; } 位于图像上方。为了使它随着浏览器变小而变大,您将需要使用媒体查询。这些是您头脑中包含的标签,允许您根据屏幕大小加载不同的CSS文件。基本上,当屏幕较小时,您应该为加载的CSS文件设置更大的字体设置。如果您不熟悉媒体查询,这是一个阅读它们的好地方:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。祝你好运!

更新:

根据您的评论,您应该将代码更改为:

div

这使得<div class="span12"> <div class="image"> <img src="css_js/img/image.jpg"> <div class="content img-circle">[content]</div> </div> </div> img.content包裹起来。然后,在CSS文件中添加以下规则:

.image

这将更改内容相对于图片.content{ position: relative; } 所在位置的位置。阅读div属性,了解如何移动position。您仍然需要媒体查询来更新.content的大小/位置,以响应浏览器大小的变化。