What is the display value of an absolute element?
When you make an element position:absolute its computed display value is changed according to the table here in the specs.
Otherwise, if ‘position’ has the value ‘absolute’ or ‘fixed’, the box is absolutely positioned, the computed value of ‘float’ is ‘none’, and display is set according to the table below. The position of the box will be determined by the ‘top’, ‘right’, ‘bottom’ and ‘left’ properties and the box’s containing block.
If the element is inline by default (like a span) then when you make it position:absolute its display becomes block which is why you can add dimensions to it without explicitly making the element a block element. (Refer to the table here for a full list.)
It should therefore follow that there is no need to set display:block to an absolute element and that display:inline would have no influence?
Or does it?
Take a look at this code and guess where the absolute element will be placed.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
span{position:absolute;padding:5px;background:rgba(0,0,0,0.5);color:#fff;}
</style>
</head>
<body>
<p>Lorem ispum dolor sit amet <span>Absolute</span> dolor sit amet.</p>
</body>
</html>
Because the element is auto positioned (no co-ordinates) then it should become absolutely placed at that point in the flow and overlap the text on that line somewhere around the word ‘amet’. Which it does:
Now add display:block to the absolute element and see what happens.
span{display:block}
As you can see the absolute element has now dropped to the next line.
Therefore it is important when using absolute elements to take care of what display they have when using auto positions. Although absolute elements are display:block by default the block position it will not affect the auto position of the element which will be whatever its previous display:value was.
Using your new found knowledge of absolute elements have a guess at where the following code will place the absolute element?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p{text-align:right}
span{position:absolute;padding:5px;background:rgba(0,0,0,0.5);color:#fff;}
</style>
</head>
<body>
<p><span>Absolute</span> </p>
</body>
</html>
All I added was p{text-align:right}
so see if you can guess where the absolute element will be?
Did you get it right?
errr yes and no.
In good browsers the element will be to the far right of screen and poking out of the parent. That is the correct position but if you look in IE11 you will see that IE11 gets this wrong and doesn’t place it to the right unless there was also a little text actually in the line with the absolute element (IE Edge is ok).
So now you know that auto positioned absolute elements are affected by the display value and that they are also affected by the text-alignment of the parent (text-align:right text-align:center etc.).
With that in mind I have updated the box to the right demo with Example 19 using the techniques we just mentioned to move the box to the right.
These are all behaviours (and bugs in IE) that can bite the unwary so make absolutely sure you know where your absolute element is
.