Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Design › Positioning Pseudo Elements

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 4, 2017 at 2:10 pm #263355
    rashidhmoud
    Participant

    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)
    https://codepen.io/rashidhmoud/pen/dZrjLw

    Thanks.

    December 4, 2017 at 2:35 pm #263357
    Shikkediel
    Participant

    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 #263359
    Beverleyh
    Participant

    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
    Beverleyh
    Participant

    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 #263361
    Shikkediel
    Participant

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

    December 4, 2017 at 2:53 pm #263362
    rashidhmoud
    Participant

    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 #263366
    Beverleyh
    Participant

    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
    rashidhmoud
    Participant

    Oh I see.

    thank you very much.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.