- This topic is empty.
December 4, 2017 at 2:10 pm #263355
I’m trying to make a speech bubble with an arrow pointing to the user portrait and I have managed to do it, but I need someone to tell me what happens when I remove the Position (relative) property?
Here is the code: (Go to line 19 in CSS)
Thanks.December 4, 2017 at 2:35 pm #263357ShikkedielParticipant
Then your pseudo element will be positioned in relation to the first parent that does have any other positioning than static. If there is none,
windowitself will be the reference (I believe).December 4, 2017 at 2:37 pm #263359
It’s to keep the arrow placement “connected” to the main bubble parent. Remove it and the arrow will be positioned relative to the document body, or to the closest ancestor element with relative positioning.December 4, 2017 at 2:41 pm #263360
And also “Hello” Edo! :) I can’t type very quickly on mobile.December 4, 2017 at 2:45 pm #263361ShikkedielParticipant
Lol and hi, finally the shoe is on my other foot for once.December 4, 2017 at 2:53 pm #263362
BUT what I know is this: elements that are positioned (absolute) is positioned relative to the nearest positioned ancestor…
So what if I rap the box with a new div so that the pseudo-element is positioned absolutely to box without needing the position relative!December 4, 2017 at 3:07 pm #263366
elements that are positioned (absolute) is positioned relative to the nearest positioned ancestor
No – they’re position relative to the document body, unless a parent has a position of relative, then the absolutely positioned element is positioned relative to that. Please read the article linked for more info.
So what if I rap the box with a new div so that the pseudo-element is positioned absolutely to box without needing the position relative!
I wouldn’t work without the relative positioning. If you don’t put relative positioning on the/a parent (immediate or extra wrapper, or something else higher up the DOM) the arrow will be positioned relative to the body element.December 4, 2017 at 3:13 pm #263371
Oh I see.
thank you very much.
- The forum ‘Design’ is closed to new topics and replies.