Why Shouldn't I Use Position:Absolute for Positioning Everything

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.

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.

Why does position absolute make page to overflow?

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

does CSS absolute positioning mean don't use it?

Well, no. position:absolute; means it is absolutely positioned in a relatively positioned container. Take the following example:

x { position: absolute; top: 0; left: 0; }

This means it will be placed in the top left corner of it's parent container, if that has position:relative;. However, if it does not, it will keep travelling up the DOM tree, untill it finds one that does. If noone does, it will be placed in the top left corner of the document (body).

CSS Absolute position on the right covers other elements

If you use absolute, your parent div needs to be positioned relative so that the absolutely positioned element is absolute within the parent and not the DOM as a whole (or other ancestors set to relative).

<div class="wrapper">
    <span class="badge color2">Height</span>
    <span class="badge colorW">==</span>
    <input type="text" class="form-control condition-input"/>
    <div class="d-inline condition-button-group">Text</div>
</div>

Style:

.wrapper{
    position:relative;
}
.condition-button-group {
   right:0;
   top:0;
}

Check out this link: Position absolute but relative to parent

You may need to play with the style a bit to position it exactly where you want, but this is the route to take to do what you are trying to do.

CSS Absolute position occasionally not respected

The inconsistent behaviour is due to two things: one, you've not set the actual position (e.g. top/left) for the .items, and two, your image has no dimensions specified, so its size won't be known by the browser until it's loaded.

Because you haven't specified a position, but have specified absolute positioning, the .item elements are defaulting to the values they would have if they were statically positioned. That is, they'll be directly below the image.

I believe that when you're seeing the .items below the image, that's because the image is in your cache, so the browser knows how big it is on its initial layout run, and sets the static position of the .items below the image.

When you're seeing the .items on top of the image, that's because the browser hasn't worked out how big the image is on its initial layout run (i.e. it's still loading) so it positions the .items as though the image has zero height. Usually, once the image was loaded, the layout would be recalculated, and the .items would move down, but because you've specified their positioning as absolute, I believe the browser is assuming it doesn't need to reposition them, as the image size shouldn't affect their positioning, because they've been taken out of the normal layout flow.

Anyway. Specify an actual position for your absolutely-positioned elements, and everything should start working.

Why Shouldn't I Use Position:Absolute for Positioning Everything