• Block elements with overflow:hidden styles do not have position:relative and position: Absolute styles;
  • The internal overflow element is located by position:absolute, and the containing block of the overflow element is the parent of the element that sets overflow:hidden
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>Overflow: Hidden/Scroll will not hide all child elements</title>
    <style>
    html.body {
        margin: 0;
    }
    .over-hidden{overflow:scroll; height:100px; font-size:14px; width:100px; border:2px dotted #ddd; }.outer{position:relative}
    .inner1{position:absolute; top:0;height: 200px; background:yellow; }.inner2{position:absolute; top:200px; background:pink; }</style>
</head>

<body>
<div class='over-hidden'>
    <div class='outer'>
        <div class='inner1'>This is the first box. This is the first box</div>
    </div>
    <div class='inner2'>This is the second box. This is the second box</div>
</div>
</body>

</html>
Copy the code