1. Element drift
Remove an element from the page flow and float it in a certain direction. Other block elements will be placed below this element. When inline elements are injected into other block elements, the inline elements will surround this element.
#amazing{
width: 200px;
float: right;
}
As shown in the picture:
If other elements want to avoid this element
Copy code
The code is as follows:
#footer{
clear: both;
}
As shown in the picture:
2. Freeze layout
The element remains in the page flow. This element is locked and frozen on the page. Regardless of whether the window is enlarged or reduced, the size of this element remains unchanged.
Copy code
The code is as follows:
#allcontent{
width: 800px;
}
As shown in the picture:
3. Gel structure
Lock the width of the content area in the page and place it in the center of the browser
Copy code
The code is as follows:
#allcontent{
width: 800px;
margin-left: auto;
margin-right: auto;
}
As shown in the picture:
4. Absolute layout
Remove an element from the flow of the page and float it somewhere on the page.
Copy code
The code is as follows:
#sidebar{
position: absolute;
top: 128px;
right: 480px;
}
As shown in the picture:
5. Fixed layout
Remove an element from the page flow and float it somewhere in the window.
Copy code
The code is as follows:
#coupon{
position: fixed;
top: 300px;
left: 100px;
}
As shown in the picture:
6. Relative layout
The element remains in the page flow, but the element is offset to the specified position before the page is displayed. Because the original position is still in the flow, it will not be occupied by other elements.
.beanheading img{
position: relative;
right:120px;
}
As shown in the picture: 