html - 为什么元素被背景图像推出 View ？

Question

我正在制作一个水平滚动网站并遇到一个问题，当使用 flexbox 时，我的内容被我的背景图像推出页面。请看我的笔:

https://codepen.io/anon/pen/NwgQmG

我正在使用三个背景图像，每个占据整个页面的宽度和内联 block 来创建水平滚动。

此外，我想添加 flexbox 以便我可以在每个背景图像之上创建我自己的网格系统。问题是，当我添加 flexbox 时，我必须在背景图片下方的第一个 div 上使用 position: absolute，这样背景图片就不会被压到页面底部。

<div id="homeImg" class="background-image-full">
  <div class="container row" style="position: absolute;">
    <div class="container column">
      Hello There!
    </div>
  </div>
</div>

然后，当我尝试向网格系统内的容器添加文本时(“Hello There!”)，文本不会显示。它被推到左上角，如 inspect 所示。

如何让我的文本显示出来？有没有更好的方法来使用 flexbox 而不必同时使用绝对定位？

谢谢!

Answer 1

问题是你设置了font-size:0

按照我在 this Codepen 中所做的那样将其更改为某个 px 值

您还需要将 position:relative 赋予同一类，即 .surroundContainer。

这将使您的容器坚持当前图像。

* {
  margin: 0;
}


/*box-sizing will ensure an element stays within a parent width, even if padding or borders are applied.*/

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.wrapper {
  height: 100vh;
  background-color: gray;
}

.surroundContainer {
  position: relative;
  height: 100vh;
  white-space: nowrap;
  font-size: 20px;
  color: white;
}


/* IGNORE: this is a class for a plugin */

.scroller {
  /*This scroll-snap functionality only works in Safari*/
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-x: repeat(100%);
  /*This scroll snap functionality is part of a polyfill
	that enables the functionality in Chrome.*/
  scroll-snap-type: mandatory;
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);
  /*Here, I've set the width to be 100% of the VW
	(the portion of the screen that the viewer sees before scrolling).
	Thus, overflow occurs (because my divs stretch three screens or three VWs, basically)
	and the scroll event from scrollsnap-polyfill.js is triggered.*/
  width: 100vw;
  overflow: auto;
}

.background-image-full {
  height: 100%;
  width: 100%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}

#homeImg {
  background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
}

#AboutImg {
  background-image: url("http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg");
}

#CreditImg {
  background-image: url("https://www.bluecross.org.uk/sites/default/files/assets/images/124044lpr.jpg");
}

.container {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.row {
  flex-flow: row;
  -webkit-flex-flow: row;
}

.column {
  flex-flow: column;
}

<!-- This is the wrapper for the entire page -->
<div class="wrapper">
  <!-- This is the div that contains the horizontal scrolling -->
  <div class="surroundContainer scroller">
    <div id="homeImg" class="background-image-full">
      <div class="container" style="position: absolute;">
        <div class="column" style="border:5px solid white; height:300px; width:300px;">
          <p>Hello There!</p>
        </div>
      </div>
    </div>
    <div id="CreditImg" class="background-image-full"></div>
    <div id="AboutImg" class="background-image-full"></div>
  </div>
</div>