Is it possible to have different z-index in the same div?

bring div to front without z-index
z-index not working
z-index alternative
z-index not working with absolute positioning
negative z-index
z-index stacking context
css z-index always on top
z-index overflow hidden

I'm trying to have twice the same text, one above the other. This text is cut by an image.

These texts are in the same div that is centered, but their z-index remains the same.

I tried to change any z-index of my elements.

.bottom {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: #ededed;
  position: absolute;
}

.up {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: transparent;
  -webkit-text-stroke: #ededed 2px;
  z-index: 2;
  position: absolute;
}

.group {
  position: relative;
  width: 465.125px;
  height: 144px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30%;
  z-index: 1;
}
<div class="group">
  <p class="up">ZAIUS</p>
  <p class="bottom">ZAIUS</p>
</div>

The z-index property is not required at all to achieve your goal, as you can see in the example below.

Furthermore the z-index should be omitted as long as possible to keep the code clean, reusable, maintainable and expandable. Of course, in really small projects it is not as important as in larger ones.

#frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.group {
  position: absolute;
  width: 400px;
  height: 250px;
  left: 10%;
  top: 30%;
}

.group img {
  position: absolute;
  top: 0;
  left: 70%;
}

.big-letters {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  color: #ededed;
}

.up {
  color: transparent;
  -webkit-text-stroke: #ededed 2px;
}
<div id="frame">
  <div class="group">
    <div class="big-letters bottom">LOREM</div>
    <img src="https://via.placeholder.com/300x200"/>
    <div class="big-letters up">LOREM</div>
  </div>
</div>

What No One Told You About Z-Index — Philip Walton, The z-index property can be specified with an integer value (positive, zero, If several elements share the same z-index value (i.e., they are placed on DIV #4 position: absolute; z-index: 1;. DIV #5 no positioning z-index: 8;� If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply. In the following example, the layers' stacking order is rearranged using z-index. The z-index of element #5 has no effect since it is not a positioned element. DIV #1

I dont know much about z-index, but removing z-index from .up and changing position to relative works, if what i understand is correct.

.bottom {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: #ededed;
  position: absolute;
}

.up {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: transparent;
  -webkit-text-stroke: #ededed 2px;
  position: relative;
}

.group {
  position: relative;
  width: 465.125px;
  height: 144px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30%;
  z-index: 1;
}
<div class="group">
  <p class="up">ZAIUS</p>
  <p class="bottom">ZAIUS</p>
</div>

Using z-index, div { z-index: 1; /* integer */ } The z-index property in CSS controls the closer to you. z-index only affects elements that have a position value other than static (the default). in the order that they appear in the DOM (the lowest one down at the same Can you please help me by giving some examples. I need to create a table fixed on the bottom of screen (I'm so far now) and I'd like the rows to have different z-index values, because I want them to look like 'folders' where images are sliding d

I don't see a problem here, Just assign the stroked element a higher z-index. Also maybe you are getting confused due to the color of the text and the stroke being the same. I tried demonstrating it HERE.

z-index, An image of a cat; A white block with text; Another image of the same Even if Duration: 14:08 Posted: Apr 25, 2019 Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. The z-index property in CSS controls the vertical stacking order of elements that overlap. When elements overlap, z-order determines which one covers the other.

4 reasons your z-index isn't working (and how to fix it) — Coder Coder, I have always struggled with the CSS property z-index. A positioned element is an element with any other position value. It is possible to change the stacking order of the pink box child elements. the orange box in front of the blue box, because they are not within the same stacking context anymore. To reduce the size of Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

Z-Index Explained: How to Stack Elements Using CSS, The z-index property specifies the stack order of an element. with greater stack order is always in front of an element with a lower stack order. auto, Sets the stack order equal to its parents. This is Negative numbers are allowed, Play it � . Ordinary dividends will be shown in box 1a of the Form 1099-DIV you receive. Qualified Dividends Qualified dividends are the ordinary dividends subject to the same 0%, 15%, or 20% maximum tax rate that applies to net capital gain. They should be shown in box 1b of the Form 1099-DIV you receive. The maximum rate of tax on qualified dividends is:

CSS z-index property, There are quite elaborate rules to determine paint order, but here we only need to compare two things: If an element has a higher z-index , it's painted later. ideally only concern ourselves with other values in that same file. See how to use the tag to group HTML elements and style them with CSS, how to apply class, id, style, and other attributes to tag. Try Examples.

Comments
  • yes, it is possible, provide z-index to '.bottom' also. be it 1
  • What do you mean by "This text is cut by an image"? And where will that image be shown in the DOM? In div.group or another element? And you want the image to be inbetween the filled text and the stroke text? What is the role of the filled text in such case? Is the image semi-transparent?
  • There is my issues on picture: imgur.com/a/k2nPpMk Providing z-index to .bottom doesn't change anything
  • Thanks for your help! Unfortunately it doesn't work. The filled goes under the stroke one
  • There is some screenshots of what I got and what I should get : imgur.com/a/k2nPpMk If you want, I can try to create a codepen!
  • I had a look at your image, you should create a codepen.
  • Also from the snapshot, I see that the image is not a sibling of the text, did you try having the image as a sibling of both the element which you are trying to stack?
  • Specially since z-index tends to be grouped and restricted to the parent's or ancestors's z-index which ever is the first one eligible for a z-index.
  • There is the codepen: codepen.io/azogbiceps/pen/bZZLdb It works but the image size is kinda hard to get back