What is overflow

When you use DIV+CSS layouts, you get a lot of DIV nesting — the parent DIV has one or more child DIV nested within it. By default, the parent div is auto — it can be as large as the parent div wants. However, the parent div can also have a fixed height (or width), such as height:100px, so if the child div’s height exceeds this value, by default, the child div will exceed the parent div’s limit, which is called overflow. We can control the child div by setting the parent div’s CSS property, Overflow. Here we use overflow: Hidden to hide the portion of the child element that overflows.

The parent element height is determined

When the height of the parent element is determined, overflow: hidden is set to hide content that exceeds the width and height of the child element, and the hidden element does not occupy space.

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #father{ width: 50px; height: 50px; overflow: hidden; } #son{ width: 100px; height: 100px; background-color: darksalmon; } < / style > < / head > < body > < div id = "father" > < div id = "son" > my width is 100 px < / div > < / div > < p > test placeholder < / p > < / body > < / HTML >Copy the code

The height of the parent element is uncertain

As stated at the beginning of this article, the parent element height is auto, and by default, the child element exceeds the parent element. But if positioning is set up, it can lead to a different situation.

Let’s start with the following code:

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #father{ overflow: hidden; } #son{ position: absolute; width: 100px; height: 100px; background-color: darksalmon; } < / style > < / head > < body > < div id = "father" > < div id = "son" > my width is 100 px < / div > < / div > < / body > < / HTML >Copy the code

Look at the performance:

Obviously, the content of the child element overflow is not hidden. The reason is the absolute positioning of the child element. The relative element of an absolute positioning element is its closest ancestor, which must meet the following requirements: Position must be relative, absolute, and fixed. If there is no such ancestor, it is positioned relative to the body. Therefore, the child element is now positioned relative to the body, and the overflow content is not hidden.

Let’s look at the following code:

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #father{ position: relative; overflow: hidden; } #son{ position: absolute; width: 100px; height: 100px; background-color: darksalmon; } < / style > < / head > < body > < div id = "father" > < div id = "son" > my width is 100 px < / div > < / div > < / body > < / HTML >Copy the code

Open the HTML file in the browser, you can see a blank page 😨!! The reason is that the child element is separated from the document stream, and the parent element is not spread-at this point, the parent element is 0 in height. And the child element is positioned relative to the parent element, set overflow: hidden… . So, the child element is completely hidden.

Therefore, if you want to achieve the effect that the child element is set to absolute and the overflow content is hidden, you need to set the width and height of the parent element and set the positioning to relative/absolute. Readers can try by themselves.