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
Html easily implements rounded rectangle
Question: How to achieve a rounded rectangle usin...
A brief discussion on the concat function in MySQL. How to add a string before or after a field in MySQL
How to use the concat function in MySQL: CONCAT(s...
How to write beautiful HTML code
What Beautiful HTML Code Looks Like How to write ...
HTML table markup tutorial (1): Creating a table
<br />This is a series of tutorials provided...
Suggestions on creating business HTML emails
Through permission-based email marketing, not onl...
Docker builds CMS on-demand system with player function
Table of contents text 1. Prepare the machine 2. ...
Lombok implementation JSR-269
Preface Introduction Lombok is a handy tool, just...
How to install phabricator using Docker
I am using the Ubuntu 16.04 system here. Installa...
Summary of basic usage of $ symbol in Linux
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
Use nexus as a private library to proxy docker to upload and download images
1. Nexus configuration 1. Create a docker proxy U...
5 ways to achieve the diagonal header effect in the table
Everyone must be familiar with table. We often en...
Two simple menu navigation bar examples
Menu bar example 1: Copy code The code is as foll...
The most convenient way to build a Zookeeper server in history (recommended)
What is ZooKeeper ZooKeeper is a top-level projec...
Oracle deployment tutorial in Linux environment
1. Environment and related software Virtual Machi...
Web front-end development CSS related team collaboration
The front-end development department is growing, ...