about float and position in CSS

Postion:relative is the relative positioning of the child block-level element for the parent element, and the positional keyword uses left/right/top/bottom. The sibling blocks are positioned relative to each other, but the original position remains when the position is moved. And then the sibling block element is positioned based on the position before being removed.

Float:right/left is a child block-level element flow set targeting the parent element, and the keywords used to locate the margin/padding. The relative positioning of the sibling block elements is re-rendered based on the new position after the move, which can overlap and the original position is emptied.

The biggest difference between the two is position retention.

Float positioning:

<style>
*{border:1px solid #eee;}
body{
border-color: #09f;
}
ul{list-style:none;}
li{float:left;}
#li1 {width:200px;height:200px;border-color:red;}
#li2 {width:200px;height:150px;border-color:green;}
#li3 {width:200px;height:100px;border-color:blue;}
</STYLE>

<ul id= #id >
<li id=li1>li1</li>
<li id=li2>li2</li>
<li id=li3>li3</li>
</ul>

Position:relative positioning:

<style>
*{border:1px solid #eee;}
body{
border-color: #09f;
}
ul{list-style:none;width:800px;height:400px;margin:0 auto; Border-color:black;}
li{position:relative;}
#li1 {width:200px;height:200px;border-color:red;top:20px;}
#li2 {width:200px;height:150px;border-color:green;}
#li3 {width:200px;height:100px;border-color:blue;}
</STYLE>

<ul id= #id >
<li id=li1>li1</li>
<li id=li2>li2</li>
<li id=li3>li3</li>
</ul>

Run separately to see how it works.

about float and position in CSS