Абсолютное положение и скрытое переполнение

Question

Абсолютное положение и скрытое переполнение

У нас есть два дива, один встроенный в другой. Если внешний DIV не является абсолютным, то внутренний DIV, который является абсолютным, не подчиняется переполнению, скрытому внешним DIV (пример).

есть ли шанс заставить внутренний DIV подчиняться переполнению, скрытому от внешнего DIV, не устанавливая внешний DIV в положение absolute (причина, которая испортит наш полный макет)?
Также позиция относительно нашего внутреннего DIV не является вариантом, поскольку нам нужно "вырасти" из таблицы TD (exmple).

есть ли другие варианты?

645 4

html css overflow css-position layout

4 ответов:

Comments

Ничего не найдено.

shankhan · Accepted Answer · 2013-10-08 15:40:19

сделать внешний <div> до position: relative и внутри <div> до position: absolute. Это должно сработать для вас.

Tesserex · Accepted Answer · 2011-01-05 17:27:35

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

Si7ius · Accepted Answer · 2018-05-17 12:54:55

абсолютно позиционированный элемент фактически позиционируется относительно 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; 
}

rochano · Accepted Answer · 2013-05-04 19:11:34

вы просто сделать 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>

Я надеюсь этот код поможет вам :)