Control Drawing Layer Order of Properties

[Karric]

Problem:
• Some properties, like border/background/box-shadow, are always 'behind' any children.
• Consider an overflow container, you may want a gradient at the top/bottom to create a faded edge effect. Although a mask can be used, sometimes a subtractive effect is undesired, an additive effect is wanted.

Proposal:
• A new property property-draw-order, with syntax similar to transition/animation. See example below.

Example:

box {
	overflow: scroll;
	background-image: linear-gradient(white,transparent);
	border: 2px solid gray;
	box-shadow: 0px 0px 10px 0px white;
	outline: 2px solid green;
	property-draw-order: outline 1, border background-image 2;
}

Before:
- border/background are drawn over by children.

After:
- border/background is drawn in front of children.

Implementation Notes:
• The number after the property is the layer stack order number, where the largest number represents the last/top-most layer.
• Multiple properties can be specified at once for a given number, as a way of sub-ordering ties. Otherwise, while reading left-to-right, add an imaginary increasing decimal to the order number when encountering the same order number.
• It may be extreme to describe this as paint-level z-indexing, but that is the spirit.