When to Use CSS Positioning

When to use CSS positioning?

ALA has a nice tutorial (there're lots of examples)
CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.

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/

When do we use position:relative in CSS?

I mostly use position :relative in the element when I know the inner element of that element is going to be positioned absolutely.

For example If I have two divs and outside div is a static block and elements inside the outer div is going to be positioned absolute relative to the outer div. Then use position:relative for the outer div and inner div should use position:absolute. Now the inner div elements can be placed anywhere using top, bottom, left and right attributes of CSS.

When to exactly use position relative

Case 1

You have inner element that is positioned absolute and want that element to stick to it's parent. Than you apply position: relative to parent element. By default absolute element pops out from DOM flow and takes position from closest relative element (html by default)

Case 2

You want to move element but still keep it in DOM flow. Than apply position: relative and move it with left/right/top/bottom properties.

Case 3

You want to place one element over another. Static elements does not take effect of z-index that's why you need to set it's position to relative, static or fixed

There may be other use cases

.a {  background-color: #ddd;    left: 50px;  top: 150px;  position: relative;    width: 200px;  height: 200px;  text-align: center;}.absolute,.a div {    position: absolute;  left: 50px;  top: 50px;    width: 100%;  height: 60px;  background-color: rgba(250, 0, 0, .4);}

<div class="a">  HTML > relative  <div>HTML > relative > absolute</div></div>
<div class="absolute">HTML > absolute</div>

Explanation of CSS AND HTML positioning

Whenever an element is positioned absolutely, it will lift itself out of the flow of the page. Any positioning attributes the element is given, will always be relative to it's parent, containing element.

In this instance, the parent element is the container div. This container has no positioning attributes, so will be positioned in the top left corner of the web page.

The topleft div is then positioned 8px from the top and 16px across from that same corner of the container div.

The image has no positioning, but happens to be shown in the top left corner of the parent container, underneath your positioned text.

You can see how absolutely positioned elements are always relative to their parent, by adding a margin value to the container div. For example, if you apply a margin of 50px, the container will be inset 50 pixels left and down from the top left of the page. The image and text will move 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.

CSS positioning questions - do I use float, position, or display?

Display vs Position vs Float

In general I would say that the modern way to position elements is to use display properties - typically using display:flex or display:grid on parent elements to position their children, or using display:block, display:inline or display:inline-block on an element to position it self.

Where you would use position:relative and position:absolute is if you need to take an element out of flow. A typical case is if you need some elements to overlap. (ie. if you have three canvases that you are laying on top of each other).

Floats were a standard way of positioning elements (ie getting something to sit on the right of the page) in the old days. But now flex box has come along.

However - where you might want to use floats is if you want text to wrap around the element - like it might in a news paper. This is especially important as now HTML elements don't need to be rectangular. See this example.

CSS Resets

I use them. Why not.

These days, typically you might be using some kind of styling library like Material-UI or Bootstrap anyway, but yeah.

In regards to what you're trying to do.

I would use flexbox here.

You have used 'align-self' here - but align-self only applies to a child of a flex parent.

header {  display: flex;  flex-flow: row nowrap;  /*By default this is row wrap - I like to always be explicit with it*/  align-items: center;  /*center vertically, (because the flex flow is row*/}
img {  border: solid 2px black;  max-height: 100px;  /*size the image*/  object-fit: scale-down;  /*make the image keep it proportions*/}
p {  font-weight: bold;  font-size: 2em;}

<header>  <img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">  <p>World Guitars</p></header>

Best practice using css positioning element

I think you don't have to put position: absolute for every element, it's not good. You can use absolute for only particular case. The fact is, position: absolute will put an element everywhere and it's may out of flow, and it won’t affect or be affected by any other element in the flow. You can learn more about positioning here :

Course -> http://www.codecademy.com/courses/web-beginner-en-6merh
Learn and sample -> http://alistapart.com/article/css-positioning-101

Is there anything wrong with positioning all elements relatively?

Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.

If every element has position:relative, this would be the direct parent.

But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.

At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.

An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.

CSS position relative and absolute

relative positioning keeps elements on the page so their position is affected by other static and relative positioned elements. If you want the black box to be positioned relative to the yellow box, you want to make the black box position: absolute. An absolutely positioned element will be positioned relative to it's closest non-static positioned ancestor.

<!DOCTYPE html><html>
<head>  <title></title></head>
<body>  <div style="position: absolute;left:100px;top: 100px;height:600px;background-color: yellow;width: 600px;">    <div style="position:relative;left:100px;top:100px;height:200px;width:500px;background-color: red;">    </div>    <div style="position:absolute;left:100px;top:50px;height:10px;width:10px;background-color: black;">    </div>  </div></body>
</html>

When to Use CSS Positioning