position:absolute issue on iPad

Question

I have a HTML code as follows;

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

And there is a CSS defined as;

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

Now there is an issue on the iPad Safari..i.e. The position of the buttons remain fixed/stick to the bottom of the screen...i.e. if the height of the content table above it increases, it kind of overlaps with the buttons at the bottom.

Is there any way by which I can avoid that overlap and instead have it positioned based on the dynamic height content above ?

score 2 · Answer 1 · answered Jun 21 '18 at 13:26

2

With position absolute in Ipad, or Iphone you need of position absolute in elemtent, and position relative inside father, but imporant to function in ipad and iphone is add left:0, or right:0;

answered Jun 21 '18 at 13:26

Tiago Oliveira

21
1

2

Can you clarify your answer? I don't get it – Nico Haase Jun 21 '18 at 13:31
lol i had the same problem. it works on my iphone but not on ipad, then i add left and right : 0. after it works on ipad too^^ – Dennis Schaffer Feb 15 '19 at 08:32

score 2 · Accepted Answer · answered Aug 01 '11 at 13:59

Try with:

position: relative;

absolute

The element is positioned relative to its first positioned (not static) ancestor element

relative

The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

(source)

Relative allows you to adjust the element position relative to the "content above".

position:absolute issue on iPad

2 Answers2

Linked