0

As I understand, ::before pseudo shall create a node as a first child of the element it belongs to. I am trying to add ::before element that shall be underneath the main element, but it renders above it, overlapping the main content. As I understand, it shall be rendered like:

<div id="c">
<div id="pseudo-before">
</div>
Main text
</div>

And, if I need to place ::before pseudo under the main content, I just have to set the z-index for the parent and child respectively. I tried to set it but it does not work. I suppose I do not understand something about how it works, please help - how to make ::before or ::after to be shown under the content of the element they belongs to? Thank you

An explanation (as requested): I need the red box o the snippet to be placed beneath the green box but above the containing div and body, and I cannot do that. Please tell me how to do that.

#c
{
position: absolute;
top: 1em;
left: 1em;
width: 20em;
text-align: justify;
border: 1px solid #000;
background: #0f0;
padding: 1em;
width: 20em;
display: inline-block;
font-family: helvetica, arial, sans-serif;
z-index: 100;
}

#c::before
{
  content: "";
  position: absolute;
  top: 1em;
  bottom: -1em;
  width: 5em;
  background: rgba(255,0,0,.5);
  z-index: 0;
}
<div id="b">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque in dictum non consectetur a. Non diam phasellus vestibulum lorem sed risus. Id diam maecenas ultricies mi eget mauris pharetra et. Aliquam nulla facilisi cras fermentum odio eu. Urna neque viverra justo nec ultrices dui. Eget aliquet nibh praesent tristique magna sit. Diam in arcu cursus euismod quis. Justo eget magna fermentum iaculis. Ipsum nunc aliquet bibendum enim. Arcu risus quis varius quam quisque id diam vel quam. Porta nibh venenatis cras sed felis eget velit aliquet. Odio ut enim blandit volutpat maecenas volutpat. Ut placerat orci nulla pellentesque dignissim enim sit. Aliquet sagittis id consectetur purus. Vulputate sapien nec sagittis aliquam. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Facilisis mauris sit amet massa vitae tortor condimentum. Porttitor massa id neque aliquam vestibulum morbi.

<div id="c">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</div>

</div>
BUKTOP
  • 867
  • 10
  • 22
  • check this :https://stackoverflow.com/questions/52694564/css-why-does-positionrelative-appear-to-change-the-z-index/52698754#52698754 .. you will find the explanation why it's above and not below – Temani Afif Oct 09 '18 at 22:52
  • and what you need is to add a negative z-index to the before element – Temani Afif Oct 09 '18 at 22:53
  • Yes, I found it while testing but I'm afraid it will be hidden under elements behind it. Well, thank you, give me a minute to read the link you provided – BUKTOP Oct 09 '18 at 22:54
  • Well, so I can set "-1" and it shall work. Could you please add this as an answer with the link to the spec so I could accept? thank you – BUKTOP Oct 09 '18 at 22:58
  • I founded another one more similar to your case: https://stackoverflow.com/questions/50852342/why-using-absolute-position-causes-the-div-to-be-on-top/50855010#50855010 will close as duplicate then – Temani Afif Oct 09 '18 at 23:01
  • I cannot make it work even with `z-index: -1` – BUKTOP Oct 09 '18 at 23:02
  • can you edit then with more detais and show the issue? as it sould work fine with any negative z-index – Temani Afif Oct 09 '18 at 23:02
  • edited, dunno what else can I add – BUKTOP Oct 09 '18 at 23:06
  • ah I see, in this case you need to remove z-index for the parent element and then you can add negative z-index to the pseudo element – Temani Afif Oct 09 '18 at 23:08
  • bingo, thank you! But why??? read the spec twice still don't understand the logic – BUKTOP Oct 09 '18 at 23:11
  • yes this one is a bit tricky, here a related question : https://stackoverflow.com/questions/52557595/z-index-problem-with-multi-layer-background/52557704#52557704 – Temani Afif Oct 09 '18 at 23:11
  • rofl. could you please add this as an answer here, so others could fid it? – BUKTOP Oct 09 '18 at 23:13
  • 1
    I added it as a duplicate with anothe relavant question too ;) – Temani Afif Oct 09 '18 at 23:15

0 Answers0