Абсолютный позиционный div не скрыт

Question

У меня есть это

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

Теперь давайте предположим, что:

• "контейнер" имеет ширину 300px
• "контейнер" имеетпереполнение: скрыто;
• "div1" имеет ширину 1000 пикселей;
• "div1" имеет абсолютное позиционирование, верхняя часть: 0 пикселей, слева: 0 пикселей;

Проблема:

«div1» не скрыт, он переполняет «контейнер», но все равно показывает: (.

Если я просто уберу «position: absolute», он будет работать.

Как я могу скрыть переполнение "div1"?

Answer 1

Добавить позицию: относительно элемента 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>   

Answer 2

добавление

#container { position: relative; }

скроет переполнение.

Answer 3

Добавление абсолютного положения к элементу удалит этот элемент из нормального потока.Он будет позиционировать себя абсолютно относительно ближайшего родительского элемента, который относительно позиционирован.

Именно поэтому добавление «position: относительный» к «контейнеру» даст желаемый эффект.