Position
Define the element with a fixed, absolute or relative position, either based on the page or based on 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 you may ask: But then relative and absolute can have the same result? A: Yes and no.
This will depend on the interaction and combination between them.
-
If there is no parent : Position is relative to body
-
If there is parent element but no position defined : Position is relative to body
-
If there is parent element with position : relative: The position of the child element is relative to the parent element
Float
float already has a purpose very different from position . It will "float" your element relative to the parent element.
Example:
.el-float {
float: left;
}
That is, left will align its element left, right to right, none without alignment, etc.
And then, again, you must ask yourself: But with an absolute position I can achieve the same result. A .: Yes. MORE! You're talking about responsive, layout layout that can interact with other elements, where not always using position is the solution. After all, why would so many properties if everything was solved like this?
See a very practical example. A right-aligned menu list:
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>
Have you seen the big difference between float and position ?
In the first option it aligns correctly, in the second all the elements are "heaped". You could get around the situation but you would need to set a "top" position for each li element, do the calculation and .. well, you should already imagine the work that it would do.
Display
The Display no longer fits this question. That is, it interferes a little in the behavior of the elements, but not as much as this your doubt.
