Is It Considered Bad Practice to Use Absolute Positioning

Is it considered bad practice to use absolute positioning?

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.

Is Absolute positioning a best practice or should I avoid it?

Many users change the font size of your page by configuring their browser settings. If you use absolute positioning, things will not align right for them.

In absolute positioning, when your page gets more complex, a single design decision would require you to reposition all of the elements, but in relative positioning, you would only need to change one value, and all the other elements would adjust accordingly.

Why shouldn't I use position:absolute for positioning everything?

Relative Divs

---

Pros-First they allow for your site to handle a change in content. IF you were to use all absolute div tags you could easily have your tags overlap and hide each other when the data within them changed. Secondly, many good sites allow for the information to wrap depending on the screen resolution and browser size that a user uses to access the web page.

---

Cons-Slight changes in the size of your relative divs can cause your tags to change how they wrap. Also, change in information can sometimes cause frustrating changes in your overall site look, which in turn requires some tweaking.

Absolute Divs

---

Pros-First they solve the issue of having a small amount of content scattered across a larger area. This is usually the case with header data or heavily graphical sites. Sometimes you will have a large area with a background image and you will have few controls along the edges and in the middle that need to be placed exactly. Relative divs would be a headache in this case as you would need multiple extra divs and they would easily break when a user resized their browser or access the site from a small resolution screen. The other major use for Absolute divs is pushing content out of the area it was originally in. A great example of this is menus! The header of a menu is usually contained within one div but the items within it fall into another div when the menu header is hovered over. Also, tooltips and things that popup on the screen usually require absolute positioning.

---

Cons-Absolute divs run into a similar issue as Relative ones if they are used incorrectly. The issue is they become tedious to manage. Specifically, if you used 10 absolute divs to control your content areas and one of those areas became larger or smaller because your content changed you could have to modify the location of every single div. Which would take a great deal of time.

---

In Conclusion - Many times you will want to use a site with Absolute and Relative div sections not only because they both serve a purpose but because when using them together you can create the best looking web pages with the least amount of time and code.

Using position is good practice or not

Check this explained in detail:

https://css-tricks.com/forums/topic/rwd-can-we-use-position-absolute-or-fixed-in-responsive/

Is position:absolute without top or bottom a good CSS practice?

CSS does not have to be semantic. Semantic HTML means that the tags, identifiers and classes have meaning.

CSS is purely representational and does not have to have meaning.

And absolute positioning without defining top and bottom is perfectly OK (it just defaults to auto)

position: Absolute ( or fixed ) layout vs normal layout

This question is pretty subjective. Nonetheless, here's my two cents.

Positioned Layout

• Pro: Arguably more intuitive code.
• Con: Everything is outside of the normal document flow. Making segments of the page that are dynamic, i.e. content, very difficult to position around.

Normal Layout

• Pro: Just the opposite - document follows normal flow. Making it easier and requiring less code for a majority of your layout.
• Con: Typically you have to mess with float, margin, or position to achieve segments like a sidebar.

In the end, I typically develop a normal layout as my base. I save the positioned items for things that will never move, i.e. a top right navigation, temporary UI elements, etc.

Why are fixed and absolute positioned elements considered block formatting context, but not a relatively positioned elements?

I would say because position:relative doesn't change the behavior of the element like absolute and fixed will do. When setting an element with absolute and fixed, it will get removed from the flow. It's like you remove a fragment of the page to make it independent thus it need to establish a new block formatting contexts.

Whith position:relative it's different.

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.

then

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.^ref

Basically, position:relative will keep the behavior of the element and will simply allow you to shift its position after being placed in the normal flow. You need to check the other properpties to see if the element will establish a BFC or not.

You may also note that positon:relative apply to inline element and inline element should not establish a BFC.

CSS - Why are there so many ways to position, and which is the right way?

The four most commonly used position values are initial, relative, absolute and fixed.

The fixed value is used to position an element at a fixed position on the main screen.

The values absolute and relative are used to put an element in a fixed position relative to a parent. You need to define the element as absolute and his parent as relative.

Then you can do something like this:

<style>
    body{
        position:relative;
    }
    #copyright{
        position:absolute;
        top:5%;
    }
</style>

<body>
    <h1> Welcome to my website. </h1>
    <p id="copyright"> Copyright 2016 </p>
</body>

For more information see w3schools

Is * {position:relative} a bad idea?

Wildcards can cause performance issues when not used carefully. That would probably not be the case in your example, but it's a bad habit to develop.

But more importantly, it's rare that you can conclusively say you want any behavior to apply to all elements.

With relative positioning, you will at best achieve nothing and at worst create many headaches for yourself trying to troubleshoot things that would normally "just work".

Relative positioning definitely has its uses. Apply it when you need it.

---

Related Topics