When onclick happens, I do not want the red span to affect / rearrange the text. Is this possible without having to create a parent span that holds the text together? Maybe it can be solved with other css settings?
I thought it would be possible by using fixed on the span, but apparently not.
Edit:
The text should be unaffected, nothing should be changed or moved when the span gets inserted. Where the span ends up does not matter, but the important thing is that nothing is affected when it enters the body / becomes “inline block”.
It does have the effect of not moving the text. But perhaps a fixed position is not what you wanted.
Absolute positioning may be what you want, it won’t affect the text, but unlike fixed, it will scroll with the other content.
When the span is revealed the B jumps back to the top line. This is because the text wrapping algorithm now sees the span as a place that it can break the text (BOB). (In Chrome at least as browsers will most likely vary).
It is unclear how where the red box needs to go as it will not sit between the B and the O when it is revealed if it is removed from the flow. It will appear in the auto position it would have been had it not been removed.
If the red box should appear on top of the B then a stacking context needs to be created so that it can be positioned with co-ordinates.
I am unclear as to where the red box is expected to go?
Yes that makes no sense either which is why a suggest another element should be around the word BOB and then the extra span position in relation to that element.
I thought it odd that something with fixed or absolute position would affect flow. I thought maybe because it’s inline, though displaying it inline doesn’t make sense to me.
Yes it shouldn’t affect the flow but I assumed that the fact the span became visible allowed the word to break at B. However if you don’t hide the span the line doesn’t break until you add position:absolute; so there is more to it than that which makes me think its a bug.
Setting an absolute element to display:inline (or block) will affect its position when coordinates are not supplied as it will take up the place it had in the flow before it was absolutely placed. If its display:block it starts on a new line but if its display:inline it may be in the middle of a line. Auto positioned absolute elements are also affected by text-alignment (text-align:center or right) but none of that has an influence in this case.
Probably the easiest solution is to add a white-space:nowrap on the word BOB and then it all stays still.
