Understanding position, display and float in responsive layout

Question

I created a simple "project" with CSS, HTML and JS, with the purpose of my learning. However some doubts arose at the end of the project (I will leave the link of the same to download), Dropbox - Project.

My biggest doubt is regarding the positioning of elements on the screen, I read on several sites about position, float and display, even so I do not understand the purpose of them. I would like help to check whether I carried out the project in a practical way or reversed the order of float and position.

I confess I didn’t see why to use float since with position I can float in any direction by setting top and left.

Thank you.

Answer 1

Position

I defined the element with a fixed position, absolute or relative, either on the basis of the page or on the basis of its parent element.

Example:

/**
 * Neste caso, não importa se a div `elemento` é um elemento parent, child, se é o primeiro, último, etc.. 
 * este elemente sempre estará posisicionado a 10px do topo e 20px da lateral. SEMPRE.
 */
.elemento-fixed {
    position: fixed;
    top: 10px;
}

/**
 * Neste caso, o elemento vai estar posicionado a 20px do topo em relação ao seu elemento pai.
 * Ou seja, se o elemento pai estiver a 100px de distância do topo, este elemento estará a 120px de distância.
 * Se o pai estiver a 260px, o elemento estará a 280px e assim por diante.
 */
.elemento-relative {
    position: relative;
    top: 20px;
}

/**
 * Neste caso, o elemento terá uma posição absoluta de 20px do topo da página
 * Ou absolutamente a 20px do topo do seu elemento pai
 */
.elemento-absoluto {
    position: relative;
    top: 20px;
}

Only with this analysis can you ask yourself: But then relative and absolute may have the same result? A: Yes and no.

This will depend on the interaction and combination between them.

• If there is no parent element: The position is relative to the body
• If there is a parent element, but no position defined: The position is relative to the body
• If there is a parent element with position: relative: The position of the child element is relative to the parent element

---

Float

The float already has a very different purpose than position. It will "float" its element relative to the parent element.

Example:

.el-float {
    float: left;
}

That is, left will align its element to the left, right to the right, None without alignment, etc..

And then, again, you have to ask yourself: But with an Absolute position I can get the same result. A.: Yes. BUT! You’re talking about responsive layout, layout that can interact with other elements, where not always using position is the solution. After all, so many properties if everything was solved like this?

See a practical example. A menu list with right alignment:

ul {
  width: 180px;
  border: 1px solid #212121;
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
  background:white;
  padding: 20px;
  display: inline-block;
}
ul.first li {
  width: 80px;
  padding: 8px;
  border: 1px solid red;
  float: right;
}

ul.second {
  position: relative;
}
ul.second li {
  width: 80px;
  padding: 8px;
  border: 1px solid red;
  position: absolute;
  right: 0;
}

<ul class="first">
    <li>Menu 01</li>
    <li>Menu 02</li>
    <li>Menu 03</li>
    <li>Menu 04</li>
</ul>

<ul class="second">
    <li>Menu 01</li>
    <li>Menu 02</li>
    <li>Menu 03</li>
    <li>Menu 04</li>
</ul>

Saw the big difference between the float and the position?

In the first option it aligns correctly, in the second all elements are "stacked". You could get around the situation but would need to set a "top" position for each element li, do the calculation and.. Well, you can imagine the work it would do.

---

Display

The Display no longer fits this question. I mean, it interferes a little in the behavior of the elements, but not as much as this doubt.