In CSS overflow:hidden Solutions to failure problems

Time:2020-7-31

Failure reason

Today, when I wrote the carousel chart, I found that overflow; hidden; failed. The reasons are as follows: if the parent element wants to hide the overflow absolutely positioned child element, it needs to add a location to the parent element; because the absolutely positioned child element will look for the parent element with location from the inside out, if it can’t be found overflow:hidden; It will also fail.

Let’s find out

The important thing, again, as mentioned above, overflow:hidden; The reason for invalidation is: if the parent element wants to hide the overflow absolutely positioned child element, it needs to add a location to the parent element; because the absolutely positioned child element will look for the parent element with location from inside to outside, and if it cannot be found, the parent element needs to be positioned overflow:hidden; It will also fail.

Let’s try:

(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; It doesn’t work

(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 location to the parent element, both absolute and relative (note that if the positioning is absolute, the parent element will affect the element below the y-axis). In this way, the absolute child element can find the parent element, overflow:hidden; It won’t fail

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.