Question

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

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

此外，我想添加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！”）时，文本不会显示。如检查所示，它被推到左上角。

如何让我的文字出现？有没有更好的方法来使用flexbox，我不必也使用绝对定位？

谢谢！

Answer 1

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

将其更改为某些px值，就像我在this Codepen

中所做的那样

此外，您需要将position:relative提供给同一个班级，即.surroundContainer。

这将使您的容器粘在当前图像上。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

为什么元素被背景图像推出视图？

1 个答案: