Forums

Give help. Get help.

  • # December 4, 2017 at 2:10 pm

    Hi,

    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

    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, window itself will be the reference (I believe).

    # December 4, 2017 at 2:37 pm

    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

    More info https://css-tricks.com/absolute-positioning-inside-relative-positioning/

    And also “Hello” Edo! :) I can’t type very quickly on mobile.

    # December 4, 2017 at 2:45 pm

    Lol and hi, finally the shoe is on my other foot for once.

    # December 4, 2017 at 2:53 pm

    Okay…

    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

    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

    Oh I see.

    thank you very much.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag