About CSS position

About CSS position
The CSS learning time is not long, and the position issue remains unclear. Today, I systematically studied and sorted it out as follows: html {font-size: 100%; height: 100% ;}body {font-family: 'lato', Calibri, Arial, sans-serif; color: # fff; background: # ADD8E6; overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%, at the same time, two reference lines 1 and position = relative are drawn on the page. page1 and page2 are objects of the same level, both of which use the body as the parent element 1. initial Location. page1 {width: 30%; height: 30%; background-color: # fDD8E6; position: relative ;}. page2 {width: 30%; height: 30%; Background-color: # ccccc6; position: relative;} effect: 2. change the top and left of page1 and page2. page1 {top: 10%; left: 30% ;}. page1 {top: 10%; left: 30%;} shows that when position: relative, the element moves relative to its original position, the moving distance is relative to its parent element. For example, if the top of page2 is 10%, its relative position is to move the width * 10% of the parent element relative to the original position of page2. 3. when page2 is a child element of page1. page1 {width: 30%; height: 30%; background-color: # fDD8E6; position: relative ;}. page2 {width: 30%; height: 30%; background-color: # ccc6; position: relative;} the effect is as follows: the size of page2 is relative to its parent element page1. 4. when page1 is still the parent element of page2, the position of page1 remains unchanged, and page2 is set to top: 10%; left: 30%; the effect is as follows: when the position of page1 is changed to absolute, the effect is the same: therefore, the position and size of page2 change relative to page1, regardless of whether page1's position is relative or absolute. 4. What is the effect of page1 {position: absolute; top: 30%; left: 30%;} Page1 {position: relative? So relative only changes relative to the parent element. Try again, page1 {position: relative; top: 30%; left: 30%;} Page1 {position: relative;} And page1 {position: relative; top: 30%; left: 30%;} Page1 {position: relative; top: 30%; left: 30%;} Relative is finally achieved. Through the above experiments, you can understand absolute. Whether it is absolute or relative, it only looks at the parent element.