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

Question

У меня есть следующий HTML-код;

<div>Content table with varying height</div>
    <div id="buttons">
    <TABLE>
    <TBODY>
    <TR>
    <TD>2 buttons here....</TD>
    </TR>
    </TBODY>
    </TABLE>
    </div>

И есть CSS, определенный как;

div#buttons{
    position: absolute;
    bottom: 1em;
    left: auto;
}

Теперь существует проблема с iPad Safari..i.e. Положение кнопок остается фиксированным / придерживаться нижней части экрана ... т.е. если высота таблицы содержимого над ней увеличивается, она как бы пересекается с кнопками внизу.

Есть ли какой-нибудь способ, которым я могу избежать этого наложения и вместо этого расположить его на основе содержания динамической высоты выше?

Answer 1

Попробуйте с:

position: relative;

абсолютный

Элемент позиционируется относительно своего первого позиционированного (не статичного) элемента-предка

относительно

Элемент расположен относительно его обычной позиции, поэтому «left: 20» добавляет 20 пикселей к левой позиции элемента

( источник )

Относительный позволяет настроить положение элемента относительно «содержимого выше».

Answer 2

С абсолютным положением в Ipad или Iphone вам нужно абсолютное положение в элементе и относительное положение внутри отца, но важно, чтобы функционировать в ipad и iphone добавляется влево: 0 или вправо: 0;