Absolute positioned div not hidden

I have this

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

Now, let's assume that:

the "container" has a width of 300px

the "container" has overflow: hidden;

the "div1" has a width of 1000px;

the "div1" is absolute positioned, top:0px,left:0px;

The problem:

The "div1" is not hidden, it overflows the "container" but it's still showing :(.

If I simply remove the "position:absolute" it will work.

How can I hide the overflow of "div1" ?

---

Add position: relative to container div element.:

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>   

---

adding

#container { position: relative; }

will hide the overflow.

---

Adding position absolute to an element will remove that element from the normal flow. It will position itself absolute to the closest parent that is relatively positioned.

This is why adding "position:relative" to the "container" will achieve the desired effect.

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

上一篇: 在表格单元格溢出？

下一篇: 绝对定位div未隐藏