0

I am trying to better understand the CSS z-index property and stacking contexts.

As practice, I've built a little HTML demo containing some elements, and I am trying to order them in all kinds of different orders using z-index positioning only.

The basic demo is available in this fiddle.

Now, is it possible to stack the elements in the above demo in the following order (farthest to closest): #d1, #d4, #d2, #d3 ?

(To clarify, the order in the initial demo is: #d1, #d3, #d2, #d4)

Edit:

Prior to asking this question, I have actually searched and read about z-index and stacking contexts. I am familiar with the general rules and specification of how z-index works, and when stacking contexts are created.

Hence, this is not a general "I do not understand how z-index works" question, and therefore it is not a duplicate of this question.

This question refers to the specific case that I have presented above in as much detail as I could. What I ask for is a very specific answer to that specific question - either "Yes, this can be done like so...", or "No, this can't be achieved, because..."

Johan Hirsch
  • 557
  • 4
  • 21
  • element with higher z-index will appear closest( on top) – Cavan Page Jul 18 '17 at 22:35
  • @CavanPage I am familiar with the general rules. Can the specific order presented in the question be achieved using z-index positioning? If so, how? Otherwise, why not? – Johan Hirsch Jul 18 '17 at 22:57
  • Yes this can be done. Ex. Set #d1 to 1, #d4 to 2, #d2 to 3, and #d3 to 4 . As long as element X has a higher z-index than element Y, element X will overlap . see this for max & min values of z-index (https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index) – Cavan Page Jul 18 '17 at 23:02
  • This doesn't work, because of the stacking contexts created by #d1 and #d2 (the parent elements of #d3 and #d4, respectively) – Johan Hirsch Jul 18 '17 at 23:05
  • I see what the issue is now. Do you need to nest the elements? – Cavan Page Jul 19 '17 at 15:31
  • @CavanPage Yes. – Johan Hirsch Jul 19 '17 at 16:57

0 Answers0