Why is an element pushed out of view by background image? - html

Question

I'm making a horizontal scrolling site and encountering an issue where, when using flexbox, my content is pushed out of the page by my background image. Please see my pen:
https://codepen.io/anon/pen/NwgQmG
I'm using three background images that each take up a full page's width and inline-block to create horizontal scrolling.
In addition, I want to add flexbox so that I can create my own grid system on top of each background image. The problem is that when I add flexbox, I must use position: absolute on the first div below my background image so that the background image isn't pushed down to the bottom of the page.
<div id="homeImg" class="background-image-full">
<div class="container row" style="position: absolute;">
<div class="container column">
Hello There!
</div>
</div>
</div>
Then, when I attempt to add text to a container inside my grid system ("Hello There!"), the text does not show up. It's pushed to the upper left-hand corner, as indicated by inspect.
How can I get my text to show up? Is there a better way to use flexbox where I don't have to also use absolute positioning?
Thanks!

Answer 1

The problem is you set the font-size:0
Change it to some px value as I did it in this Codepen
Also you need to give position:relative to the same class i.e. .surroundContainer.
Which will make your container stick to the current image.
* {
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>