Question

<!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之上。如何恢复页面的正常流程？

Answer 1

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

解决方案：不要绝对定位图像，以便它们占用div中的空间，并使用top和left将绝对定位的文本放在正确的位置。

＆＃13;

.boxWrap {
  position: relative;
}

.boxItem {
  /* no styles for boxItem */
}

/* new class boxText */
.boxText {
  position: absolute;
  left: 0; top: 0;
  color: white;
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为问题在于“boxWrap”类，你使用它两次，删除与“col-12”一起使用的那个，所以它看起来像这样：

<div class="col-12">
      <div class="boxWrap">
           <img src="01.png" class="img-fluid boxItem" alt="">
      </div>
 </div>

在CSS上使用position属性后，图像被放在彼此的顶部

2 个答案: