1. position: static the default positioning of all elements is position: static, which means that the element is not located and appears in the document where it should be. 2. If position: relative is set to position: relative, you can use top, bottom, left, and right to move this element relative to the position where the element should appear in the document. [Meaning that the element still occupies the original position in the document, but it is visually moved relative to its original position in the document] 3. position: absolute when position: absolute is specified, the elements are separated from the document, that is, they are no longer in the Document. You can accurately locate the elements by setting top, bottom, left, and right. 4. position: relative + position: absolute if we set relative positioning for the div-1, all elements in the div-1 will be located relative to the div-1. 5, two columns absolute position # div-1 {position: relative;} # div-1a {position: absolute; top: 0; right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px;} 6. Floating definitely does not work for columns with variable heights. Here is another solution. We can move an element to the left/right, and the text is surrounded by it. # Div-1a {float: left; width: 200px;} 7. If we move an element to the left and the second element to the left, they will push up against each other. # Div-1a {float: left; width: 150px;} # div-1b {float: left; width: 150px;} 8. Clear the floating column after the floating element, we can clear the float so that other elements can be correctly located. # Div-1a {float: left; width: pixel PX ;}# div-1b {float: left; width: pixel ;}# div-1c {clear: both ;}