使用 CSS 将图像定位在以下 <div> 上方答案

【问题标题】：Using CSS to position an image above the following <div>使用 CSS 将图像定位在以下 <div> 上方
【发布时间】：2016-04-16 11:20:56
【问题描述】：

我正在尝试实现如附图所示的布局。

我正在使用 Bootstrap 3，我目前有以下 HTML 标记（“white-bg”的 CSS 只是由一行背景色完成，底部的灰色是通过设置背景色身体）：

<body class="gray-bg">
<section class="white-bg">
<div class="row">
    <div class="col-lg-12">
        <h2 class="text-center">Title</h2>
        <img class="feature-image" src="./images/image.jpg" alt="">
    </div>
</div>
</section>

<section>
<div class="row">
    <div class="col-lg-12">
        <p>Body text...</p>
    </div>
</div>
</section>
</body>

我想知道我的 CSS 中的 .feature-image 需要什么才能实现我想要的布局？

非常感谢！

【问题讨论】：

因为我没有你的 CSS 库，它是怎么出现的？您是否尝试过将图像移动到单独的 div 行？
对不起。我应该澄清我正在使用 Bootstrap 3 作为我的主干 CSS 库。让我更新我的问题以包含此信息。谢谢！

标签： html css layout position

【解决方案1】：

我在移动设备上，所以我无法检查我的答案，但是给你的 gray_bg div 一个负的上边距应该可以解决问题。像这样 margin-top: -10px; 还。您可能必须将底部 div 放入容器流体类中

好的，这是一个工作示例

.white-bg {
  background-color: white;
  }

.feature-image {
 background-color: lightgray;
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 150px;
  margin-bottom: -20px;
  }
.gray-bg {
  background-color: gray;
  }

<body class="gray-bg">
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
<section class="white-bg">
<div class="row">
    <div class="col-lg-12">
        <h2 class="text-center">Title</h2>
        <img class="feature-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRnL5-GO2muNIeI97gaUNYWdyzB5tLozHkacW4O8Q0TNWQC35ns" alt="">
    </div>
</div>
</section>

<section>
<div class="row">
    <div class="col-lg-12">
        <p>Body text...</p>
    </div>
</div>
</section>
</body>

【讨论】：

感谢您的快速回复，HTMLNoob！是的，您的解决方案有效，但是在仔细查看了我当前 HTML 文件的结构之后，我不得不承认我的原始问题不准确。 gray-bg div 确实不是 gray-bg div。灰色背景确实来自，因此具有负边距顶部不会使灰色向上移动。让我修改我原来的问题以澄清这一点。希望你能给我一些建议。再次感谢！
ok @topgun200204 所以你想让你的底部 div 向上移动而不是图像向下移动？
我确实希望图像向下移动，因为底部是身体，本身不能上下移动。
好的，我会相应地编辑我的答案。这可能需要一些实验
非常感谢 HTMLNoob！

【解决方案2】：

您可以尝试使用以下 CSS：

.col-lg-12{
    position:relative;
    top:-300px;
}

但是，我建议添加另一个类，例如“up”到包含图像和标题的 col-lg-12 并风格化 .up 因为覆盖引导类等通常不是一个好主意。

【讨论】：

【解决方案3】：

将您的标题、图片和正文全部添加到一个 div、row、section 中。不要将您的内容分成两个部分以适应背景颜色，而是使用渐变背景并将其应用于文档的部分或正文。

http://www.colorzilla.com/gradient-editor/

【讨论】：