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
Question: How to achieve a rounded rectangle usin...
How to use the concat function in MySQL: CONCAT(s...
What Beautiful HTML Code Looks Like How to write ...
<br />This is a series of tutorials provided...
Through permission-based email marketing, not onl...
Table of contents text 1. Prepare the machine 2. ...
Preface Introduction Lombok is a handy tool, just...
I am using the Ubuntu 16.04 system here. Installa...
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
1. Nexus configuration 1. Create a docker proxy U...
Everyone must be familiar with table. We often en...
Menu bar example 1: Copy code The code is as foll...
What is ZooKeeper ZooKeeper is a top-level projec...
1. Environment and related software Virtual Machi...
The front-end development department is growing, ...