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

Html easily implements rounded rectangle

Question: How to achieve a rounded rectangle usin...

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