Is it considered bad practice to use absolute positioning? [closed]

by

For a chess like game such as you are developing, there is nothing inherently wrong with using absolute positioning. As you said, relative positioning and normal flow layout make this sort of task quite difficult.

Of course, if you were developing a more standard website, such as a site providing some public service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users. In this case I would avoid it.

Having said that, a lesser known benefit of absolute positioning is that it allows localized absolute positioning within the nearest “positioned” parent element.

Note: A “positioned” element can be any of the following: relative, fixed, absolute, or sticky.

To explain:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute;left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Here, childDIV is actually positioned 20px from the left and 20px from the top of parentDIV, NOT the overall document. This gives a nice precise control over nested elements on a page, without sacrificing the overall page flow-layout.

So to answer your question (relative positioning being preferred over absolute): I don’t believe there is a correct answer, it depends on what you are needing to build. However in general positioning (absolute or relative) versus default flow layout, my approach is as described above.

More Related Contents:

  1. How can I make this background to see full?
  2. How to make an element width: 100% minus padding?
  3. Best way to center a on a page vertically and horizontally? [duplicate]
  4. Change select box option background color
  5. With CSS, use “…” for overflowed block of multi-lines
  6. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  7. Fix footer to bottom of page
  8. When to use the !important property in CSS [duplicate]
  9. Force flex item to span full row width
  10. Removing body margin in CSS
  11. What is quirks mode?
  12. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  13. Google Fonts are not rendering on Google Chrome
  14. Inline elements and line-height
  15. Text overflow ellipsis on two lines
  16. Using CSS to insert text
  17. How can I make a link from a table cell
  18. Rounded table corners CSS only
  19. Create a slanted edge to a div [duplicate]
  20. How to rotate a 90 degrees?
  21. How do I make an input element occupy all remaining horizontal space?
  22. Remove ‘:hover’ CSS behavior from element
  23. HTML + CSS: Numbered list with numbers inside of circles
  24. vs. font-weight:bold & vs. font-style:italic
  25. Add border to div increase div width?
  26. How to move placeholder to top on focus AND while typing?
  27. HTML/CSS set div to height of sibling
  28. Should Tables be avoided in HTML at any cost?
  29. Adding text before list
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment