绝对定位div未隐藏

我有这个

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

现在，我们假设：

“容器”的宽度为300px

“容器”溢出：隐藏;

“div1”的宽度为1000px;

“div1”是绝对定位的，top：0px，left：0px;

问题：

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

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

我怎样才能隐藏“div1”的溢出？

---

添加位置：相对于容器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>   

---

加入

#container { position: relative; }

将隐藏溢出。

---

将绝对位置添加到元素将从正常流程中移除该元素。 它将自己定位于相对定位的最接近的父母身上。

这就是为什么在“容器”中添加“position：relative”可以达到预期效果的原因。

链接地址: http://www.djcxy.com/p/63025.html

上一篇: Absolute positioned div not hidden

下一篇: creating a menu with CSS and overflow: auto