An absolute positioned box will always default to the left edge of it’s containing block’s padding box.
If you were to remove the right:0; from your other box, you would see it come over to the left side and layer on top of the ::before green box.
I’ve never seen any browser place an ap’d box anywhere other than the left side without the offset values being set. Of course that assumes the box has a narrower width than it’s containing block.
It never hurts to add the left:0; in the rules, then the browser has firm instructions what to do with it.
It’s also the same with static blocks, they will default to the left side of their container too if they have a narrower fixed width.
That’s not quite true Ray as the default is auto which means the absolutely placed element will be positioned at the point it was in the flow.
Most of the time that will appear to be the left side but if the parent had text align center or text align right then the absolute element would be central or to the right without positioning assuming it was an inline element before being absolutely positioned.
It was common practice to position drop down menus using left auto when only the main parent (the ul usually) had position relative yet the drop menus would always line up with the top menu items as required. Old IE used to get this wrong so everyone started using left:0 and adding position relative to the list item instead.
Therefore unless you specifically want auto positioning behavior it is better to always supply at least two co-ordinates for your absolute elements just to be sure.
After reading through your post, I remember every bit of what you said now.
I was also wondering if dirction:rtl; changed the flow, I assume it does.
The same applies with position:fixed in that case too doesn’t it?
That was the trick to keeping it inside a wrapping div, by not setting offset coordinates but using margins to shift it if you needed to move it.
Yes as you mentioned it’s useful in making something fixed at the point it would have been in the flow.:)[quote=“asasass, post:12, topic:285228”]
Which would you go with here?
[/quote]
As usual ‘it all depends’ and there is no real definitive answer because it all depends on what happens next?
The second example doesn’t need two pseudo elements as you could simply add borders to the same box.
The before element is superfluous for a visual point of view but it all depends whether you are going to do something with the other methods as the boxes were right and left whereas in my example is in the middle. Then there is the issue of stacking contexts and you would need to ensure clickable elements aren’t masked by the pseudo elements. In the first example the pseudo elements are only 3px wide so there is less danger of them getting in the way.
All the methods may be correct depending on what happens next and only you know that:)
