Text isn't overlapping on the background-CodePudding

I'm trying to use two different background colors for different sections of the page. Right now I haven't scaled it appropriately but I'm currently just trying to fix this issue. The issue is that the text doesn't appear over the background, but instead under it.

The expected output is that the text is above the background colors. The actual output is that the text appears below the whole background (Not behind, but below it).

.bg-container {
  min-height: 100vh;
}

.top {
  height: 50vh;
  background: #76a3b1;
  position: relative;
}

.bottom {
  height: 50vh;
  background-color: #fff;
}

.title1 {
  position: absolute;
}

<div >
  <div ></div>
  <div ></div>
</div>
<div >
  <span >
            TEXT
        </span>
</div>

CodePudding user response：

You can add z-index properties to the elements to control which falls in front of the other: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Note that this property only works on positioned elements, but you are positioning the text anyways so that should be fine in your case

CodePudding user response：

The text doesn't appear over the background because you put the text span after the background in your HTML. move the span "inside" the background div, as the following:

.bg-container {
  min-height: 100vh;
}

.top {
  height: 50vh;
  background: #76a3b1;
  position: relative;
}

.bottom {
  height: 50vh;
  background-color: #fff;
}

.title1 {
  position: absolute;
}

<div >
  <div ><span >
            TEXT
        </span></div>
  <div ></div>
</div>

<div ></div>

CodePudding user response：

In this case it's much easier to use a linear gradient on the body element, with an abrupt change between color 1 and color 2.

If you want to center the page title, you can do it as in my snippet below. But also without these settings for centering (i.e. if it's not absolutely positioned), the background colors will remain behind it.

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(to bottom, #76a3b1 0%, #76a3b1 50%, #ddd 50%, #ddd 100%) fixed, no-repeat;
}

.main-page {
  height: 100%;
  position: relative;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <div >
    <h1>TEXT</h1>
  </div>
</body>

CodePudding user response：

Add the following to your css: .title{ z-index: 1000; }