Home > Developer > Web Develop
1, position:fixed
Lock position (relative to the browser's location), such as the bottom right corner of some websites, such as "fixed"
2, Position:absolute
(1) The outer layer has no position,div relative to the browser location, such as "no position" (50 pixels from the right border of the browser, 50 pixels from the bottom border of the browser)
(2) The outer position,div is positioned relative to the outer border, such as "position" (50 pixels from the right border of table 2 and 50 pixels from the bottom frame of table 2)
3, Position:relative
Moves relative to the default position, such as the position of the A1 before moving with the relative, A2 the position after the relative move, the distance between the A2 and the original position is 30 pixels, and the left margin is 30 pixels.
@charset "Utf-8";/*CSS Document*/. A{Border:5px solid Black;width:100px;Height:100px;Background-color: White; Left:50px;Bottom:50px;position:fixed;}#b{Border:5px solid Black;width:100px;Height:100px;Background-color: White; Right:50px;Bottom:50px;position:Absolute; }#c{Border:1px solid Red;width:400px;Height:200px; }#d{Border:1px solid Red;width:400px;Height:200px;position:Absolute}. A1{Border:5px Double Green;width:100px;Height:100px;Background-color: White; Right:0px;Top:0px;margin:10px;position:fixed; }. A2{Border:5px Double Green;width:100px;Height:100px;Background-color: White; Right:30px;Top:30px;margin:10px;position:fixed; }
<Body><Divclass= "a">Fixed</Div><DivID= "C">Table 1<DivID= "B">Outer layer without absolute</Div> </Div><DivID= "D">Table 2<DivID= "B">The outer layer has absolute</Div></Div><Divclass= "A1">Original Location</Div><Divclass= "A2">Relative Location</Div></Body>
4. Layering (Z-index)
Layered in the direction of z-axis, it can be understood to be divided into a stack of paper, the higher the number of layers on top.
In the relative example, the moved position map covers the previous location map, because the post-write code covers the previous code.
So without changing the code order, let the previous diagram cover the top, the code is as follows:
. A1{Border:5px Double Green;width:100px;Height:100px;Background-color: White; Right:0px;Top:0px;margin:10px;position:fixed;Z-index:2;/*By default, the number of layers is 1*/}. A2{Border:5px Double Green;width:100px;Height:100px;Background-color: White; Right:30px;Top:30px;margin:10px;position:fixed; }
<Body><Divclass= "A1">Original Location</Div><Divclass= "A2">Relative Location</Div></Body>
5. Flow-type layout: float
Float:left (on the left side of the browser) right (by browser)
Overflow:hidden (out of range hidden) scroll (out of range display scroll bar)
6. Transparent effect: Opacity
Chapter 2. HTML---CSS style sheets (formatting and layout)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
