Home > Developer > JavaScript
Position attribute and cssposition attribute in css
In css layout, position plays an extremely important role. Many Web pages must be configured with position. Position has four attribute values: static, absolute, relative, and fixed.
Static
This attribute indicates the default position. When setting it, you can cancel the inheritance attribute. In general, you do not need to set this attribute.
Absolute
This attribute indicates absolute positioning. The position of an absolutely located element is relative to the nearest located ancestor element. If the element does not have the located ancestor element, its position is relative to the initial contained block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. For example, if the last block is located using absolute and the next block is not set, the two blocks will overlap. After the element is located, a block-level box is generated, regardless of the type of Box generated in the normal stream. For example, an element is absolutely located and then moved relative to its start point by setting the vertical or horizontal position.
If you set top to 10px, the box is 10 pixels at the top of the container containing it. If left is set to 10 pixels, the box moves 10 pixels to the right of the left Border of the container relative to it.
Relative
This attribute indicates relative positioning. The element box that is set to relative positioning will offset a certain distance. The element remains in the shape before its position, and its original space remains.
If an element is relatively located, you can set a vertical or horizontal position to move the element relative to its start point.
If you set top to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.
Fixed
This attribute indicates a fixed position. It is used to locate the position relative to the browser window. If the top is set to 20px, the box is located at 20 pixels next to the top of the window, the position can also be expressed by percentage.
The effect is that no matter how you pull the browser's scroll bar, the element that sets this attribute will not change its position.
The following code is a layout made by positioning. Its effect is:
If we can flexibly use the several attributes of position, we can make a lot of beautiful la S.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
# Big {
Width: 500px;
Height: 500px;
Border: 1px solid green;
Position: relative;
}
# Div1 {
Width: 20px;
Height: 300px;
Background: lightblue;
Position: absolute;
Left: 239px;
Top: 200px;
}
# Div2 {
Width: 400px;
Height: 400px;
Position: absolute;
Left: 50px;
Top: 0px;
}
# {
Width: 200px;
Height: 200px;
Position: absolute;
Left: 100px;
Top: px;
}
# A1 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 100px;
Background: yellow linear-gradient (135deg, white, yellow );
Border-radius: 0 100% 0 0;
}
# A2 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 100px;
Top: 100px;
Background: yellow linear-gradient (30deg, white, yellow );
Border-radius: 0 0 100% 0;
}
# B {
Width: 200px;
Height: 200px;
Position: absolute;
Left: 199px;
Top: 100px;
}
# B1 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 100px;
Top: 100px;
Background: green linear-gradient (-45deg, white, green );
Border-radius: 0 0 100% 0;
}
# B2 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: px;
Top: 100px;
Background: green linear-gradient (45deg, white, green );
Border-radius: 0 0 0 100%;
}
# C {
Width: 200px;
Height: 200px;
Position: absolute;
Left: 100px;
Top: 200px;
}
# C1 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 0px;
Top: px;
Background: purple linear-gradient (180deg, white, purple );
Border-radius: 100% 0 0 0;
}
# C2 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 0px;
Top: 100px;
Background: purple linear-gradient (2deg, white, purple );
Border-radius: 0 0 0 100%;
}
# D {
Width: 200px;
Height: 200px;
Position: absolute;
Left: 0px;
Top: 100px;
}
# D1 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: 100px;
Top: 0px;
Background: red linear-gradient (270deg, white, red );
Border-radius: 0 100% 0 0;
}
# D2 {
Width: 100px;
Height: 100px;
Position: absolute;
Left: px;
Top: 0px;
Background: red linear-gradient (90deg, white, red );
Border-radius: 100% 0 0 0;
}
</Style>
</Head>
<Body>
<Div id = "big">
<Div id = "div1"> </div>
<Div id = "div2">
<Div id = "line1"> </div>
<Div id = "line2"> </div>
<Div id = "a">
<Div id = "a1"> </div>
<Div id = "a2"> </div>
</Div>
<Div id = "B">
<Div id = "b1"> </div>
<Div id = "b2"> </div>
</Div>
<Div id = "c">
<Div id = "c1"> </div>
<Div id = "c2"> </div>
</Div>
<Div id = "d">
<Div id = "d1"> </div>
<Div id = "d2"> </div>
</Div>
</Div>
</Div>
</Body>
</Html>
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
