0

Inspired by: view-source:https://vsociety.net/ I wanted to place and instance of text behind another instance of text, using z-index. Apparently I cannot use z-index without also using the position attribute. This is my code:

<h1 style="text-align: center; letter-spacing: 4px; position: relative; z-index: 999">h

  <span style="color: #ccc; position: relative; z-index: -1; font-size: 70px;">e</span> llo

</h1>

This code does not work. I have searched using search engines and have asked ChatGPT3, but did not prevail in finding an answer for my specific question; all I found were instances of "image behind text."

I would be grateful if you could point me in the right direction.

I have tried using z-index to position text behind text so that the "e" in hello, while making it appear bigger, would be placed behind the rest of "hello." It was my intention that "h - llo" would overlap the much larger "e" as a form of design. I have used position: relative;in conjunction with z-index: -1; This did not place the "e" behind "h - llo." I have also tried position: absolute; with similar results. The <h1> contains the whole word and was originally given z-index: 999; and the *span* containing the letter e was given ``z-index: -1; For a moment I thought this might be a matter of arithmetic, for +999 + -1 = +998, which does not yield a negative "layer position" for the span tag. However, giving the h1 tag a z-index of 1 and the span tag a z-index of -2 did not solve the problem. The span tag contains the e and is nested within the h1 tag, which contains the entire word hello.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Invictus
  • 3
  • 1

1 Answers1

0

.all-text {
  position: relative;
}

.text-hllo {
  position: relative;
  text-align: center;
  letter-spacing: 4px;
  font-size: 2em;
  font-weight: bold;
  z-index: 1;
}

.text-e {
  position: absolute;
  letter-spacing: 4px;
  font-weight: bold;
  color: #ccc;
  font-size: 70px;
  left: 50%;
  top: 50%;
  transform: translate(-83%, -60%);
}
<div class="all-text">
  <div class="text-hllo">h llo</div>
  <div class="text-e">e</div>
</div>
Nissim Elbaz
  • 126
  • 4