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

Question

我想放置<div>了一个<img>.

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>

更多信息与图片:

当浏览器大小很大时

当浏览器尺寸很小时.

Answer 1

尝试将z-index内容的属性设置为div高于图像,如下所示:

.content{
    z-index: 3;
}

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

更新:

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

<div class="span12">
    <div class="image"> 
        <img src="css_js/img/image.jpg"> 
        <div class="content img-circle">[content]</div>
    </div>
</div>

这使得它,以便img和.content被包裹.image.然后,在您的CSS文件中,添加以下规则:

.content{
    position: relative;
}

这将改变内容相对于图像所在位置的div位置.阅读position酒店了解如何四处移动.content.尽管如此,您仍然需要媒体查询来更新div响应浏览器大小的大小/位置.