绝对定位div不隐藏

时间:2010-12-29 16:49:21

标签: html overflow positioning

我有这个

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

现在,让我们假设:

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

问题:

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

如果我只是删除“position:absolute”就可以了。

如何隐藏“div1”的溢出?

3 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:2)

添加

#container { position: relative; }

将隐藏溢出。

答案 2 :(得分:1)

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

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