CSS: проблема переполнения таблицы с абсолютной позицией

У меня есть таблица, завернутая в div с overflow:auto, поэтому таблица может прокручиваться, если это необходимо. Проблема в том, что у меня есть всплывающая подсказка внутри ячейки, которая position:absolute и шире, чем ячейка (переполнение), и это заставляет всю таблицу прокручиваться. Абсолютное положение не должно влиять на переполнение. В чем дело?

#wrap {
    max-width:100%;
    max-height:100%;
    overflow:auto;
}

table {
    border:1px solid black;
    border-collapse:collapse;
    width:100%;
}

td {
    position:relative;
    height:50px;
}

span {
    display:block;
    min-width:9999px;
    position:absolute;
    top:25px;
    left:0;
}
<div id="wrap">
    <table>
        <tr>
            <td>
                Regular content
                <span>Absolutly positioned</span>
            </td>
        </tr>
    </table>
</div>


html css overflow
person koga73    schedule 16.12.2020    source источник
comment
Абсолютная позиция не должна влиять на переполнение. ... что заставляет вас так говорить?   -  person zgood    schedule 16.12.2020
comment
Думаю, я не понимал, что абсолютно позиционированные элементы играют роль в вычислении переполнения.   -  person koga73    schedule 16.12.2020
comment
да, я думаю, что это сбивает с толку, но вы можете проверить этот SO post на который есть достойные ответы. Один объясняет это следующим образом: Итак, когда вы добавляете абсолютно позиционированный элемент, даже если он не увеличивает ширину содержащего его блока, он увеличивает размер холста. Затем браузер предлагает механизм прокрутки, позволяющий просматривать весь холст. Именно поэтому overflow:hidden будет скрывать элементы с абсолютным позиционированием за пределами области просмотра своих контейнеров.   -  person zgood    schedule 16.12.2020
comment
Это правда, что абсолютно позиционированные элементы находятся вне потока документа, что означает, что они не влияют на положение братьев и сестер и высоту/ширину родителей. Но они по-прежнему представляют контент в DOM, на который влияют настройки переполнения родительского контейнера.   -  person zgood    schedule 16.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я бы немного изменил этот код и добавил еще один <div>.

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

person FilipA    schedule 16.12.2020