How do css elements overlap?

How to overlap css elements: 1. Set negative margin to the element. Negative margin can make the element take up less space, and subsequent elements can cover the current element; 2. Use the position attribute, using relative positioning and Absolute positioning to allow multiple elements to overlap.

The operating environment of this tutorial: Windows 10 system, CSS3 version. This method is suitable for all brands of computers.

How CSS elements overlap:

Method 1. Set negative margin

to the element Set negative margin so that the original position will not be retained after moving

Negative margin can make the element take up less space. Later elements can cover the current element

(There are two here The width and height of p's of the same size are 100px (Figure 1). When we set -margin-bottom to the p with the class name p above (see Figure 2), we found that the following elements covered the position of -margin)

Figure 1:

Method 2. Use positioning

Relative positioning (position: relative): the original position is retained and will not squeeze into other elements, but will only overlap

Absolute positioning (position: absolute): the original position will not be retained and will break away from the page flow

Example:

Effect:

For more programming-related knowledge, please visit: Programming Learning Website! !

The above is the detailed content of How do css elements overlap?. For more information, please follow other related articles on the PHP Chinese website!