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

Question

我想在<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的更多信息：

浏览器尺寸较大时

浏览器尺寸较小时

Answer 1

尝试将内容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的大小/位置，以响应浏览器大小的变化。