Box Shadow

In a page layout, whether it’s a normal document flow or a Flex layout, the page is filled with boxes. Box-shadow is an indispensable effect in page design. In a single box element, the box-shadow will be projected onto the parent. But when the shadow box is pressed against it, the shadow becomes invisible.

Method 1

In need ofbox-shadowElement Settings ofposition: relative

In normal document flow, close means that the element’s shadow on the parent is overwritten by the next element, so setting position: relative takes the element out of the document flow, and the browser handles it alone, resulting in a stack on the Z-axis, where there is no close, and the shadow is projected directly onto the normal document flow.

Method 2

Set on the parentflexAnd then in needshadowElement Settings ofz-indexGreater than or equal to 0

Flex changes the direct child element to a flex-item element, at which point it is no longer a document flow. Flex-item has the concept of the Z-axis, so setting the Z-index adjusts the stack level at which the shadows appear.

attribute

• position
• z-index
• flex

knowledge

• The document flow
• The stack
• positioning