CSS let DIV overlap example summary

CSS cascading means that when the CSS style configures the same attribute for the same element, it handles conflicts according to the cascading rules (weight) and selects the attribute specified by the CSS selector with high weight. It is also generally described as high weight. Coverage weight is low, so it is also called cascading.

1. Analysis of CSS style inheritance and cascading

Basic selector

Tag selection: Select according to the tag name in the page and apply the style directly to the specified label.

Features:

1. The tag selector will select all specified tags in the current page;

2. The tag selector has no effect on the current tag hierarchy of the code. Any association, as long as it is on the current page, can be selected.

ID selection: You need to specify a tag to set the id value first (the id value cannot be repeated and is unique in the entire page).

Class selection: Give the label a class name and select the specified label through the class selector.

2. CSS margin overlap and prevention methods

Border overlap refers to two or more boxes (which may be adjacent or nested) Adjacent borders (without any non-empty content, padding, or borders between them) overlap to form a single border. The vertically adjacent boundaries of two or more block-level boxes overlap. The resulting border width is the largest of adjacent border widths. If a negative boundary occurs, the negative boundary with the largest absolute value is subtracted from the largest positive boundary. If there are no positive boundaries, the negative boundary with the largest absolute value is subtracted from zero. Note: Adjacent boxes may not be generated by elements with parent-child or sibling relationships.

3. Analyze the stacking order of elements in CSS

When the z-index attribute and position attribute are not included, all The stacking order of elements is consistent with the order in which they appear in the HTML document. (Except for the special case of using negative margin to overlap inline elements.)

When the element is floated, the floating block element is placed between the non-positioned block element and the positioned block element. In other words, the floating element Appears above descendant block elements in normal flow and below descendant inline elements in normal flow.

When the position attribute is added to an element, all elements with the position attribute and their sub-elements will be displayed on top of other elements without the position attribute.

4. Introduction to the random overlap method of p using CSS

This article mainly introduces how to let p overlap and press If you want to overlap in order, you need CSS to achieve it, that is, CSS absolute positioning is implemented. Friends who need it can refer to the following to make p overlap and overlap in the desired order. CSS is required to implement it, that is, CSS absolute positioning is implemented.
Overlapping styles require main CSS style explanation

5. css Let two divs overlap

When making a web page, I put another web page in p There is a weather plug-in, but clicking it will jump to the advertising page. I wanted to find a way to prohibit clicks on the Internet, but I found that there is no one. The method using js did not seem to be successful. Later, I thought it would be better to use two overlapping layers to prevent it. Click, although positioning is a bit troublesome

6. div overlapping problem

I defined two p's in html, but the displayed result is that the two p's partially overlap. Originally, they were not overlapping. I don’t know which key I touched, but the layers overlapped during runtime. I took out the two p’s separately and it showed normal. I just want to ask what is the reason for this situation?

Related questions and answers:

1. javascript - When using attributes such as top in relative positioning, why do divs overlap? ?

2. javascript - After two divs overlap, a new div is generated on the page, and only one div is generated. How to write this effect?

[Related recommendations]

A brief discussion on the overlapping of margins in css

canvas dynamic ball overlapping effect

Why floating can realize text wrapping around pictures without overlapping

The above is the detailed content of CSS let DIV overlap example summary. For more information, please follow other related articles on the PHP Chinese website!