绝对定位的div不隐藏

Question

现在

<div id="container">
  <div id="div1"></div>
<div>

，让我们假设：

• “容器”的宽度为 300px，
• “容器”的溢出：隐藏；
• “div1”的宽度为 1000px；
• “div1”是绝对定位的，top:0px,left:0px；

问题：

“div1”没有隐藏，它溢出了“容器”，但仍然显示:(。

如果我简单地删除“position:absolute”，它就会起作用。

如何隐藏“div1”的溢出？

Answer 1

添加位置：相对于容器 div 元素。：

Exa：

  <style type="text/css">
        #container
        {
            width: 200px;
            background-color: red;
            height: 60px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        #div1
        {
            background-color: blue;
            position: absolute;
            top:0px;
            left:0px;
            width: 300px;
        }
    </style>

<div id="container">   
        <div id="div1">This is div1</div> 
    <div>   

Answer 2

添加

#container { position: relative; }

将隐藏溢出。

Answer 3

向元素添加绝对位置将从正常流中删除该元素。
它将自身绝对定位到相对定位的最近的父级。

这就是为什么在“容器”中添加“position:relative”就会达到预期的效果。