Позиція абсолютна і перелив прихований

134

У нас є два DIV, один вбудований в інший. Якщо зовнішній DIV не розташований абсолютним, то внутрішній DIV, який розміщений абсолютним, не підкоряється переливу, прихованому зовнішнього DIV ( приклад ).

Чи є якийсь шанс змусити внутрішній DIV підкорятися переливу, прихованому зовнішнього DIV, не встановлюючи зовнішній DIV на абсолютне положення (причина, яка приглушить наш повний макет)? Крім того, положення щодо нашого внутрішнього DIV не варіант , як ми повинні «рости» з таблиці TD ( exmple ).

Чи є інші варіанти?

— Зардоз
джерело

282

Зробіть зовнішній , <div>щоб position: relativeі внутрішній <div>до position: absolute. Це має працювати для вас.

— шаньхан
джерело

5

Дякую вам обом. Я завжди думав, що позиція: відношення - це типовий. Я щойно дізнався, що статистика є типовою. Я приймаю відповідь шанханів, оскільки обидві відповіді рівнозначні, і шанхану потрібно ще кілька балів ;-)

— Zardoz

7

Деякі пояснення та / або документація буде чудовим доповненням.

— showdev

25

А position: relativeяк із зовнішнім дівом? У прикладі, що приховує внутрішнє. Він також не перемістить його у своєму макеті, оскільки ви не вказали верхній або лівий.

— Тессерекс
джерело

9

Абсолютно розміщений елемент фактично розміщений стосовно relativeбатьків або найближчого знайденого родича. Отже, елемент з overflow: hiddenповинен бути між relativeі absoluteрозташованими елементами:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

— Сі7іус
джерело

-3

Ви просто робите divтак:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Я сподіваюся, що цей код вам допоможе :)

— рочано
джерело