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
Detailed tutorial on installing Docker on Windows
Since my local MySQL version is relatively low, I...
A brief analysis of MySQL explicit type conversion
CAST function In the previous article, we mention...
Summary of SQL query optimization knowledge points for MySQL tens of millions of big data
1. To optimize the query, try to avoid full table...
Implementation of CSS text shadow gradually blurring effect
text-shadow Add a shadow to the text. You can add...
JavaScript Canvas draws dynamic wireframe effect
This article shares the specific code of JavaScri...
Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels
1. Transactions have ACID characteristics Atomici...
Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation
Table of contents 1. Parent component passes valu...
Vue uses canvas to realize image compression upload
This article shares the specific code of Vue usin...
Vue uses el-table to dynamically merge columns and rows
This article example shares the specific code of ...
Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5
Use the following command to check whether MySQL ...
Detailed explanation of the new array methods in JavaScript es6
Table of contents 1. forEach() 2. arr.filter() 3....
Vue Getting Started with Weather Forecast
This article example shares the specific code of ...
Detailed explanation of the difference between uniapp and vue
Table of contents 1. Simple page example 2.uni-ap...
The big role of HTML meta
There are two meta attributes: name and http-equiv...
Linux series of commonly used operation and maintenance commands (summary)
Table of contents 1. System monitoring 2. File Op...