Solution to overflow:hidden failure in CSS
|
Cause of failure Today, when I was writing a carousel, I found that overflow;hidden; could fail. The reason is as follows: if the parent element wants to hide the overflowing absolutely positioned child elements, it needs to add a positioning to the parent element; because the absolutely positioned child elements will look for the positioned parent element from the inside to the outside, and if it can't find it, overflow:hidden; will also fail. check it out It is important to repeat, as mentioned above, the reason why overflow:hidden; fails is that if the parent element wants to hide the overflowing absolutely positioned child element, it needs to add a positioning to the parent element; because the absolutely positioned child element will look for the positioned parent element from the inside to the outside, and if it cannot find the parent element, overflow:hidden; will also fail. Let's try it: (1)
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
When the child element is absolutely positioned, it is obvious that overflow:hidden; is invalid
(2)
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
position: relative;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
We just need to add a positioning to the parent element, either absolute or relative (but note that if the positioning is absolute, the parent element will affect the elements below the y-axis), so that the absolutely positioned child element can find the parent element, and overflow:hidden; will not fail
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: How to click on the a tag to pop up the input file upload dialog box
>>: User experience analysis of facebook dating website design
Recommend
Ajax responseText parses json data case study
Solve the problem that the responseText returned ...
Analysis of MySQL lock wait and deadlock problems
Table of contents Preface: 1. Understand lock wai...
Three ways to implement virtual hosts under Linux7
1. Same IP address, different port numbers Virtua...
Parsing the commonly used v-instructions in vue.js
Table of contents Explanation of v-text on if for...
Solution to MySql service disappearance for unknown reasons
Solution to MySql service disappearance for unkno...
JavaScript Basics: Error Capture Mechanism
Table of contents Preface Error Object throw try…...
How to get the intersection/difference/union of two sets in mysql
Common scenarios of MySQL: getting the intersecti...
Using js to achieve the effect of carousel
Today, let's talk about how to use js to achi...
JS realizes special effects of web page navigation bar
This article shares with you a practical web navi...
Summary of accurate calculations of various distances/scroll distances in a window
Usually in project development, we have to deal wi...
Apache Log4j2 reports a nuclear-level vulnerability and a quick fix
Apache Log4j2 reported a nuclear-level vulnerabil...
Summary of the use of Vue computed properties and listeners
1. Computed properties and listeners 1.1 Computed...
WeChat Mini Programs Implement Star Rating
This article shares the specific code for WeChat ...
Docker enables seamless calling of shell commands between container and host
As shown below: nsenter -t 1 -m -u -n -i sh -c &q...
Why is the disk space still occupied after deleting table data in MySQL?
Table of contents 1. Mysql data structure 2. The ...