Is use of position:absolute inside relative can create problems in Print ,screen-readers and for mobile users?

Question

Is use of position:absolute inside relative can create problems in Print ,screen-readers and for mobile users?

or float + margin + Padding is still best if we need good compatibility at Screen, Printing and for screen reader and mobile users, Should i less use Position?

Answer 1

Screen readers completely ignore the positioning of elements via CSS. They instead use the order the elements appear in the DOM when deciding what to read first.

Consider the following example:

<p style="position:absolute;top:100;left:0">Foo</p>
<p style="position:absolute;top:0;left:0">Bar</p>

Visually, the "Bar" paragraph appears first, because we've positioned it above the other using CSS. But the screen reader will ignore the CSS and just read the "Foo" paragraph followed by the "Bar" paragraph.

So to answer your question, yes it's probably fine for screen reader users. However, be aware of the ordering of your elements and make sure that the page still makes sense when read in that order.

For position:fixed, it will depend on your target browsers. IE6 for example, doesn't support "fixed" positioning. Most mobile phones don't either (definitely mobile Safari doesn't on the iPhone) due to the fact that the viewport is of limited size.