Reputation: 50810
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 ?
Upvotes: 2
Views: 16429
Reputation: 21
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;
Upvotes: 2
Reputation: 69047
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".
Upvotes: 3