Solution 1 :

It matters mostly in the sense that your document should have good semantic organization (a combination of semantic markup and logical document structure). Content should be presented in a sensible, orderly manner. However, that can be overcome by the use of tools such as ARIA attributes which draw attention to the modal content when it’s shown, for example.

If your fixed element is static, it should be included where it’s appropriate. Primary navigation should be high, and tangentially-related content should be lower or adjacent to the content to which it relates.

Problem :

I have this question for a long time and still haven’t found any reason.

One reason it might matter is if its position can be toggled and so it’s non-fixed position actually does matter.

But for some other stuff like Modal, does it matter? I’ve used modal libraries before and their implementation of where they put the Modal in the DOM varies.

  • Some has a permanent modal element that gets toggled (simply by state or just adding a class)
  • Some creates/removes the element before the closing body tag
  • In cases like using a Component based frameworks, it’s just simply importing them at wherever you’d use it.

That being said, it made me curious why a fixed position element’s location in the DOM tree differs between these libraries, apart from obvious reasons like they have different authors.

Is this just simply preferences? Or is there any reasoning behind?


Comment posted by Quangdao Nguyen

Also worth noting specifically for modals; regardless of positioning, it should receive focus when opened and return focus to the triggering element when closed.

Comment posted by isherwood

True, but I’m not sure that’s pertinent specifically to discussions about markup order.

Comment posted by captainskippah

If I understand your answer correctly, the answer is simply semantics?

Comment posted by isherwood

Well, “semantic markup” covers correct element use and separation of content and presentation. The other component is logical document structure. So two things, really.