-1

I've designed a site here and introduced some letters like so:

<div class="d">d</div>
<div class="e">e</div>
<div class="s">s</div>
<div class="i">i</div>
<div class="g">g</div>
<div class="n">n</div>

The red letters I've given opacity to like so:

.e {font-size: 500px; position: relative; bottom: 650px; left: 
100px; color: red; opacity: 0.2}

Now d and e work well together. The opaque e overlaps the solid d as it should. However, when I want the opaque eto overlap the solid s it doesn't, the sinstead overlapping the e.

This seems to be an issue of layers or whatever word Lint or html uses?

So how to I move s to the back so e overlaps it?

Newstack
  • 53
  • 7

1 Answers1

0

You can use z-index CSS property, here. A lower value, such as z-index: 1 will stack the element below the element with a higher value, such as z-index: 99. The default value is 0. So, assign your CSS classes different z-index values, accordingly. Remember, the z axis defines how your elements are stacked above or below each other.

If you want e to be stacked above s, e should have a higher z-index value.

Using example values, this will work:

.e { z-index: 3; } .s { z-index: 2; }

Akshit Mehra
  • 747
  • 5
  • 17