Understanding Z-Index in CSS - Ahmad Shadeed

By Ahmad Shadeed Blog - 2021-02-19

Description

A visual guide on how z-index and stacking contexts work in CSS.

Summary

  • How can we move the duck in front of the fish?
  • If we apply a z-index to the duck, it will only have meaning within its stacking context (the red ring).
  • 9999, it won't do anything.
  • In our case, we want the duck, which is a part of the red ring stacking context, to be in front of the fish (Another stacking context).

 

Topics

  1. Machine_Learning (0.06)
  2. UX (0.05)

Similar Articles

Managing state with React Context

By DEV Community - 2020-10-14

In my previous post I was writing about using Redux with React for the state management. This blog po...

Adaptive Semiparametric Language Models

By Deepmind - 2021-02-24

We present a language model that combines a large parametric neural network (i.e., a transformer) with a non-parametric episodic memory component in an integrated architecture. Our model uses extended ...

When a simple React context gets out of hand.

By DEV Community - 2021-01-28

It seemed like a good idea to start. Separate state into different "contexts". Just use `useState`. Then, `useEffect` and multiple if branches snuck in and it became a nightmare.

Attention mechanism in Deep Learning, Explained

By KDnuggets - 2021-02-09

Attention is a powerful mechanism developed to enhance the performance of the Encoder-Decoder architecture on neural network-based machine translation tasks. Learn more about how this process works an ...