How to set a
above an other

Question

I would like my html page to look like this: example

But, it looks like this: what I have

Here is my code (it is include in two parents div, one with the class main and another with the class left) :

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #333;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 72vh;
  color: white;
}

.main-title {
  font-weight: bold;
  z-index: 1;
}

.trait {
  width: 279px;
  height: 14px;
  background-color: red;
  top: -16px;
  position: relative;
  z-index: 2;
}

<div class="title">
  <h1 class="main-title">Baptiste's sandbox</h1>
  <div class="trait"></div>
  <h2>Experiment every technologies</h2>
</div>

So, my question is: how to put Baptiste's sandbox above the red square ?

way to complicated as approach. Keep it simple and use `linear-gradient` as background... — tacoshy, Jun 15 '22 at 16:00

score 1 · Accepted Answer · answered Jun 15 '22 at 16:03

Just use linear-gradient to color part of the background instead of placing a div there:

h1 {
  background: linear-gradient(to bottom, transparent 0 50%, red 50% 100%);
}

/* for stylign pupose only */
body {
  background-color: grey;
}

h1 {
  padding: 5px;
  display: inline-block;
}

<h1>Random Title</h1>

score 0 · Answer 2 · answered Jun 15 '22 at 16:12

You could also use a ::before pseudo element on h1.main-title and stack it below h1 using z-index: -1.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #333;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 72vh;
  color: white;
}

.main-title {
  font-weight: bold;
  z-index: 2;
  position: relative;
  width: fit-content;
  display: block;
  line-height: initial;
}

.main-title::before
{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  content: "";
  background-color: red;
  width: 100%;
  z-index: -1;
}

<div class="title">
  <h1 class="main-title">Baptiste's sandbox</h1>
  <h2>Experiment every technologies</h2>
</div>

score -1 · Answer 3 · answered Jun 15 '22 at 17:01

     * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;

      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
      background: #333;
    }

    .main {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      min-height: 72vh;
      color: white;
    }

    .main-title {
      font-weight: bold;
      z-index: 1;

      /* added position and z-index */
      position: relative;
      z-index: 10;
    }

    .trait {
      width: 279px;
      height: 14px;
      background-color: red;
      top: -16px;
      position: relative;
      z-index: 2;
    }

 <div class="title">
      <h1 class="main-title">Baptiste's sandbox</h1>
      <div class="trait"></div>
      <h2>Experiment every technologies</h2>
    </div>

Simply add position: relative; and z-index:10; to .main-title class.

How to set a above an other

3 Answers3

How to set a
above an other