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
Since my local MySQL version is relatively low, I...
CAST function In the previous article, we mention...
1. To optimize the query, try to avoid full table...
text-shadow Add a shadow to the text. You can add...
This article shares the specific code of JavaScri...
1. Transactions have ACID characteristics Atomici...
Table of contents 1. Parent component passes valu...
This article shares the specific code of Vue usin...
This article example shares the specific code of ...
Use the following command to check whether MySQL ...
Table of contents 1. forEach() 2. arr.filter() 3....
This article example shares the specific code of ...
Table of contents 1. Simple page example 2.uni-ap...
There are two meta attributes: name and http-equiv...
Table of contents 1. System monitoring 2. File Op...