1

We can define an element within another, but command to appear behind its parent using z-index: -1:

<div style="position:relative; width:100px; height:90px; background-color:#F00;">
  <div style="position:absolute; width:200px; height:50px; 
              background-color:#00F; z-index:-1;">
  </div>
</div>

Unfortunately, this doesn't work within flex items: The child does not only appear behind the flex item, but behind the flex container, too. How to solve it?

The Conspiracy
  • 3,495
  • 1
  • 17
  • 18
  • where is the issue in your question? show us how it doesn't work – Temani Afif Oct 17 '19 at 20:21
  • @TemaniAfif I updated the question to explain the misbehaviour. – The Conspiracy Oct 17 '19 at 20:27
  • I still don't see any *flex item* in your question. There is no code showing any misbehavior – Temani Afif Oct 17 '19 at 20:27
  • @TemaniAfif I asked a clear and precise question, stating that the behaviour of the code I presented is different, if the outer div is a flex item. In my answer below I explained how to solve this. No need for additional code. – The Conspiracy Oct 17 '19 at 20:35
  • here is your code with a flex item and it works fine: https://jsfiddle.net/460gku32/5/ the red is behind the blue so again your question doesn't show any misbehavior ... it's probably clear and precise for you but sorry it's not for me. – Temani Afif Oct 17 '19 at 20:38
  • @TemaniAfif did you update my fiddle? I cannot see any difference to my solution posted below. If you intentionally posted the link to my solution: Yes of course the red is behind the blue, that's why this is my _solution_... – The Conspiracy Oct 17 '19 at 20:48
  • oops, wrong copy/past, here is : https://jsfiddle.net/0Lwpcmze/ – Temani Afif Oct 17 '19 at 20:49
  • @TemaniAfif in your fiddle, add background-color:grey; to your flex container. Then you will see the child behind is not only behind its parent, but behind the flex container as well. THIS is part of the difference to general behaviour. Within flex, the child can appear behind the flex group, or above all other elements even with z-index:-1, and only with precise CSS settings it will appear below its parent, but above the flex container. THIS is what I solve in my answer below. – The Conspiracy Oct 17 '19 at 21:06
  • here is another code to confirm that the same happen even without flex: https://jsfiddle.net/0Lwpcmze/1/ .. it's a matter of z-index relation between grand-parent > parent > child and flexbox is irrelevant here. You also confirm with your comment that your question is unclear because you had to explain all this to me inside the comment section so I can understand what is behind your question – Temani Afif Oct 17 '19 at 21:21
  • I have added a canonical duplicate that cover all the cases and explain why you obtrain such layout if you mix negative and positive z-index – Temani Afif Oct 17 '19 at 21:22

1 Answers1

-2

An element can be placed directly behind its parent div, even if the parent is a flex-item. Albeit we have to take care of three players:

  1. The flex container: Must have a position (not static, of course) and a z-index.

  2. The flex item: Should have a position, but MUST NOT have a z-index.

  3. The child behind: Must have a position and z-index:-1

Try it in this JSFiddle

We can even finetune the appearance of the child behind:

  1. Child shall appear directly behind the flex item, but above the flex container: Apply any z-index to the flex container, but none to the flex item.
  2. Child shall appear behind the flex group (behind the flex item and behind the flex container): Do not apply z-index to flex container nor flex item.

Update: As turned out in the discussion (see question comments, if interested), this behaviour and solution is not limited to flex. Nevertheless, it will occur especially there as flexbox is a 2-tier structure itself (flex container > flex item > child behind).

The Conspiracy
  • 3,495
  • 1
  • 17
  • 18
  • 1
    But this solution doesn't appear to appear to answer your question: *"Unfortunately, this doesn't work with flex items. How to solve it?"* Your solution doesn't apply `z-index` to flex items. It applies it to the children of flex items, which are not flex items, but block-level elements, just like the example in your question. – Michael Benjamin Oct 17 '19 at 20:15
  • That's unclear to me. Also unclear: *"The flex container: Must have a `position` (not static, of course) and a `z-index`."* Why *"of course"*? – Michael Benjamin Oct 17 '19 at 20:16
  • in this answer you are describing the trick you are using in the question. I don't really understand what question are you answering – Temani Afif Oct 17 '19 at 20:23
  • @Michael_B thanks for the comments, you're right (first comment) and I edited the question so it becomes clear that "this doesn't work _within_ flex items". Regarding your second comment: Of course not static, because then it wouldn't be a positioned element. – The Conspiracy Oct 17 '19 at 20:23
  • *The flex item: Should have a position* it's not needed if you only want the child to be behind – Temani Afif Oct 17 '19 at 20:28
  • @TemaniAfif I answer how the desired behaviour can be achieved within a flex item. This involves styling the flex container, flex item and child and therefore differs from the general solution. This cost me more than an hour today and I wanted to share it. Regarding your comment "the flex item: Should have a position it's not needed" >> that's why it _should_ have a position, but it doesn't _need_ one. – The Conspiracy Oct 17 '19 at 20:30
  • *differs from the general solution* --> there is nothing different, flexbox is irrelevant when it comes to stacking context. you are applying the exact same trick as shown in your question: *parent without z-index + child with negative z-index*. Also we still don't see the relation between the question and the answer. It's good to share things but it need to be clear to everyone what is the initial issue. Maybe we can provide other solutions. Actually your are simply describing a particular situation rather than solving a problem – Temani Afif Oct 17 '19 at 20:36
  • @TemaniAfif flexbox **does** differ in creating stacking contexts as static items may create a new stacking context if z-index is set - this is not the case for other css layout concepts. Of course it is the same "trick" - the question was how to apply the "trick" within flexbox! And yes, there's something different: You have to consider the flex container, flex item and child, and style all 3 precisely to achieve the desired behaviour. – The Conspiracy Oct 17 '19 at 20:44