绝对定位的 div 不隐藏答案

【问题标题】：Absolute positioned div not hidden绝对定位的 div 不隐藏
【发布时间】：2011-06-01 03:45:16
【问题描述】：

我有这个

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

现在，我们假设：

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

问题：

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

如果我只是删除“位置：绝对”，它将起作用。

如何隐藏“div1”的溢出？

【问题讨论】：

标签： html overflow positioning

【解决方案1】：

添加

#container { position: relative; }

将隐藏溢出。

【讨论】：

【解决方案2】：

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

例如：

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

【讨论】：

谢谢，我只是认为“位置：相对”是默认的：-??
位置的默认值是静态的。
如果你倾向于做很多定位，你可以用` * { position: relative; 将'position: relative'设置为默认值。 } ` 在 CSS 的顶部。

【解决方案3】：

向一个元素添加绝对位置会将该元素从正常流程中移除。它将自己定位到相对定位的最近的父级。

这就是为什么在“容器”中添加“位置：相对”会达到预期效果的原因。

【讨论】：