Text hidden when divs are set to ‘absolute’?

[StephensSpace]

Hello people,

I am working on a website that requires a ‘coming soon’ page.

I envisioned a four-checkered background that would change colors when hovered over. In addition to that I envisioned a line of text saying “Are you ready?” would be centered vertically and horizontally.

For whatever reason, when I added the text it didn’t show. I figured out how to make it display but it didn’t make sense why.

I have to use z-index: 1; and position: absolute;(or relative) to make it show up.
This would be fine but I can no longer use ‘text-align’ to center the string of text.

I am relatively new to CSS positioning so I believe that is where I’m failing.

If someone would be so kind as to point out my error and explain the cause I would be greatly appreciative.

[codepen link](http://codepen.io/StephensSpace/pen/rqKFa “http://codepen.io/StephensSpace/pen/rqKFa”)

Thanks in advance,
StephensSpace

[CodeGraphics]

Set the z-index of your 4 divs: **topleft, topright, bottomleft** and **bottomright** to a negative 1. **z-index:-1;** so that the text will come on top of them. Give your text div a width of 800px and center it vertically and horizontally using margin. **margin: 220px auto 0 auto;**

[Codepen FullScreen](http://codepen.io/alex13/full/uGEJn “”)

[CodeGraphics]

By The Way, try to be grouping your divs and separate them with commas and apply common style to them.

[David_Leitch]

I had a bit of a play around with the idea and came up with another solution [here](http://codepen.io/David_Leitch/full/cCxAm “Dave’s solution, yo”). It does what you need it to do, but is styled a little differently using Sass. Hope it helps :)

[Kitty Giraudel]

> Set the z-index of your 4 divs: topleft, topright, bottomleft and bottomright to a negative 1. z-index:-1; so that the text will come on top of them. Give your text div a width of 800px and center it vertically and horizontally using margin. margin: 220px auto 0 auto;

It will work in this particular case but it’s definitely not the best solution if he wants it to be both horizontally and vertically centered no matter what. Table trick, absolute position or flexbox is the key.

[StephensSpace]

Thanks guys!

Here is the fork that I ended up using.

http://codepen.io/jakedx6/full/qLIHi

[Author]

Posts