SyntaxShelf

Layer order

2 snippets across 2 stacks - Docker, HTML & CSS

DKDocker

Accidental Build Cache Invalidation

DK · Common Mistakes
Syntax
# Problem - COPY . . before RUN npm ci
COPY . .
RUN npm ci
Example
# Every source code change re-runs npm ci (~30-60 seconds).
# Fix - copy manifests first:
COPY package.json package-lock.json ./
RUN npm ci
COPY . .

Note Docker invalidates a layer's cache when any input changes. A broad COPY . . changes whenever ANY file in your project changes, nuking the cache for all subsequent layers. Order Dockerfile instructions from least-frequently to most-frequently changing.

HCHTML & CSS

Z-Index & Stacking

HC · Layout & Positioning
Syntax
z-index: integer;
Example
.dropdown   { z-index: 10; }
.modal-bg   { z-index: 40; }
.modal      { z-index: 50; }
.toast      { z-index: 60; }

/* Isolate stacking context */
.component {
  isolation: isolate;
}

Note z-index only works on positioned elements (relative, absolute, fixed, sticky) and flex/grid children. Elements with opacity < 1, transform, or filter create new stacking contexts. Use isolation: isolate to explicitly create one without side effects.

Frequently asked questions

How does Docker handle layer order?
This task is covered in 2 stacks on this page: Docker, HTML & CSS. The "Accidental Build Cache Invalidation" snippet in Docker uses `# Problem - COPY . . before RUN npm ci`.
Which command does the Docker example use?
The "Accidental Build Cache Invalidation" snippet uses `# Problem - COPY . . before RUN npm ci`, from the Common Mistakes section of the Docker cheat sheet.
Which stacks cover "layer order" on this page?
Docker, HTML & CSS. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Accidental Build Cache Invalidation": Docker invalidates a layer's cache when any input changes. A broad COPY . . changes whenever ANY file in your project changes, nuking the cache for all subsequent layers. Order Dockerfile instructions from least-frequently to most-frequently changing.

Browse all tasks by intent