Solution to overflow:hidden failure in CSS

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...

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...

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...