How float and position work together? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
In the below code,
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
float: left;
color: black;
}
#one{
background: red;
}
#two {
position: absolute;
background: yellow;
}
#three{
background: green;
}
#four{
background: blue;
}
--
box "two" being absolutely positioned and being away from the flow of the document, box "three" & "four" are taking place of box "two", due to which, box "two" is displaced as last element, as shown below, which looks good,
But in the below code,
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<div id="top-left-pos">Top Left
</div>
<div id="another-pos">Another pos
</div>
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
float:left;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
float: left;
width: 190px;
height: 110px;
}
top-left-pos element is absolutely positioned and away from the flow of the document, another-pos element does take the place of top-left-pos element but does not displace top-left-pos element? instead another-pos element is rendered beneath top-left-pos element, as shown below, Why top-left-pos is not displaced, unlike first scenario of box "two"?

Answer 1

How float and position work together?
They don't. An absolutely positioned element cannot float. A floating element cannot be absolutely positioned.
When an element is specified to both float and position: absolute, the latter takes precedence and the element does not float. Though unrelated, the float: left in your first scenario takes precedence over the display: inline-block as well. The spec has an entire subsection detailing how display, position and float work together.
Why top-left-pos is not displaced, unlike first scenario of box "two"?
Because box "two" in your first scenario is being displaced by floating elements. In your second scenario, there are no floats to displace that element. All you have are two absolutely positioned elements that are unaware of each other.

Answer 2

Float is nothing to to do with stacking elements in a 3D environment. As per the explanation on MDN:
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
You may be wanting the z-index property instead, if you're looking to stack your elements on top of one another. You will also need to take them out of flow in order to do this, by using position:absolute.
Update
Frustratingly, you've edited your original question with some quite major changes. The crux of these changes begs the question:
What is the relationship between float, position and display?
Thankfully, you can go and read-up about that here. Please do so. Stack Overflow is not a place you can come to learn everything you want to know about anything.