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 ?

Answer 1

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”.