使用 CSS 上的 position 属性后，图像被放置在彼此之上答案

【问题标题】：Images are being placed on top of each other after using the position property on CSS使用 CSS 上的 position 属性后，图像被放置在彼此之上
【发布时间】：2017-09-17 15:37:57
【问题描述】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <!-- My Styles -->
    <style>
        .boxWrap {
            position: relative;
        }

        .boxItem {
            position: absolute;
        }  

        h1 {
            color: white;
        }
    </style>
  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 boxWrap">
                <div class="boxWrap">
                    <img src="01.png" class="img-fluid boxItem" alt="">
                </div>
            </div>
            <div class="col-12 boxWrap">
                <div class="boxWrap">
                    <img src="01.png" class="img-fluid boxItem" alt="">
                </div>
            </div>
            <div class="col-12 boxWrap">
                <div class="boxWrap">
                    <img src="01.png" class="img-fluid boxItem" alt="">
                    <h1 class="boxItem">hello</h1>
                </div>
            </div>
            <div class="col-12 boxWrap">
                <div class="boxWrap">
                    <img src="01.png" class="img-fluid boxItem" alt="">
                    <h1 class="boxItem">hello</h1>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

好的，所以我一直在尝试使用 CSS 中的 position 属性将文本和图像放入其中。基本上，我给图像的父级赋予了图像的“相对”值和“绝对”值。事实证明，无论我在第一个“boxWrap”div“之后”放置了多少元素，它们总是被放置在该类的第一个 div 之上。如何恢复页面的正常流程？

【问题讨论】：

您能否展示一下图像如何相互重叠的快照？另外，您预计会发生什么？

标签： html css twitter-bootstrap position css-position

【解决方案1】：

问题在于，如果元素内的所有内容都是绝对定位的，则该元素实际上不再有任何内容，因此它的高度将为 0。
换句话说，你所有的 boxWrap div 的高度都是 0，而里面的 imgs 都在窗口的同一个位置，溢出它们的 div。

解决方法：不要绝对定位图片，以免占据div空间，绝对定位的文字使用top和left放置在正确的位置。

.boxWrap {
  position: relative;
}

.boxItem {
  /* no styles for boxItem */
}

/* new class boxText */
.boxText {
  position: absolute;
  left: 0; top: 0;
  color: white;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-12 boxWrap">
      <div class="boxWrap">
        <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
      </div>
    </div>
    <div class="col-12 boxWrap">
      <div class="boxWrap">
        <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
      </div>
    </div>
    <div class="col-12 boxWrap">
      <div class="boxWrap">
        <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
        <h1 class="boxText">hello</h1>
      </div>
    </div>
    <div class="col-12 boxWrap">
      <div class="boxWrap">
        <img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
        <h1 class="boxText">hello</h1>
      </div>
    </div>
  </div>
</div>

【讨论】：