5 ms·

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http:

But I got the same result by assigning z-index 2 and 3 to the other colors. So the results is the same, but the method is incorrect? does it matter? hmm http://codepen.io/anon/pen/DlyAv http://codepen.io/anon/pen/DlyAv

bunkat 14y ago
This is what I did as well. Seems to make more sense to me than putting an odd opacity value on an element.
taeric 14y ago
The point was that you can "alter the z-index" without actually altering the z-index. At least, that was my takeaway.
dazmax 14y ago
The point of the example was to show how something other than z-index, position, and order can affect stacking. It wasn't demonstrating the correct way to go about changing the stacking order.
Argorak 14y ago
The point was to illustrate the stacking behaviour introduced by opacity, not how to trivially arrange 3 elements using z-index.
philipwalton 14y ago
The point was that there are factors other than z-index involved in determining the stacking order. I'm certainly not suggesting anyone use opacity to move things around in the stacking order. I was just trying to make people aware of it. It's confusing if you don't know what's going on.
khwang 14y ago
The point of this exercise was to show that opacity has an effect on element position, which was surprising to me! It matters because it might fix a z-index bug you have one day (:
aroman 14y ago
I don't really want to add to the dogpile of comments explaining why you missed the point, but the blog post pretty clearly states what the criteria for the "challenge" were: "Here's the challenge: try to see if you can make the red <span> element stack behind the blue and green <span> elements without breaking any of the following rules: Do not alter the HTML markup in any way. Do not add/change the z-index property of any element. Do not add/change the position property of any element."
- recursive 14y ago
  He didn't change the markup. He changed the CSS. He didn't add a property to an element. He added a property to a rule.
  - mistercow 14y ago
    He didn't add a property to a rule. He entered text in the CSS editor. He didn't enter text in the CSS editor. He pressed some buttons on a keyboard. We could keep at this for a while, if you want.
  - aroman 14y ago
    Yeah I'm really not sure what you're trying to say. He explictly set the z-index on the elements by editing the CSS. It wasn't the inherent act of editing the CSS that was the violation -- explicitly setting the z-index was.

bunkat 14y ago

This is what I did as well. Seems to make more sense to me than putting an odd opacity value on an element.

taeric 14y ago

The point was that you can "alter the z-index" without actually altering the z-index. At least, that was my takeaway.

dazmax 14y ago

The point of the example was to show how something other than z-index, position, and order can affect stacking. It wasn't demonstrating the correct way to go about changing the stacking order.

Argorak 14y ago

The point was to illustrate the stacking behaviour introduced by opacity, not how to trivially arrange 3 elements using z-index.

philipwalton 14y ago

The point was that there are factors other than z-index involved in determining the stacking order. I'm certainly not suggesting anyone use opacity to move things around in the stacking order. I was just trying to make people aware of it. It's confusing if you don't know what's going on.

khwang 14y ago

The point of this exercise was to show that opacity has an effect on element position, which was surprising to me! It matters because it might fix a z-index bug you have one day (:

aroman 14y ago

I don't really want to add to the dogpile of comments explaining why you missed the point, but the blog post pretty clearly states what the criteria for the "challenge" were: "Here's the challenge: try to see if you can make the red <span> element stack behind the blue and green <span> elements without breaking any of the following rules: Do not alter the HTML markup in any way. Do not add/change the z-index property of any element. Do not add/change the position property of any element."

recursive 14y ago
He didn't change the markup. He changed the CSS. He didn't add a property to an element. He added a property to a rule.
- mistercow 14y ago
  He didn't add a property to a rule. He entered text in the CSS editor. He didn't enter text in the CSS editor. He pressed some buttons on a keyboard. We could keep at this for a while, if you want.
- aroman 14y ago
  Yeah I'm really not sure what you're trying to say. He explictly set the z-index on the elements by editing the CSS. It wasn't the inherent act of editing the CSS that was the violation -- explicitly setting the z-index was.