Home > Developer > JavaScript
CSS -- Position positioning, cssposition
The Position attribute defines the positioning mechanism used to establish the element layout. Any element can be located, but an absolute or fixed element will generate a block-level box, no matter what type of the element is; the relative positioning element is offset from its default position in the normal document stream.
The Position element generally has five attributes:
1. absolute (generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The position of the element is set through top, left, right, and bottom .)
2. fixed (generating absolute positioning elements. Unlike absolute, fixed is located relative to the browser window. The element location setting method is the same as that of absolute .)
3. relative. Therefore, "left: 20px;" adds 20 pixels to the left side of the element .)
4. static (default value of position element, which is not located, so the element will appear in the normal Document Stream)
5. inherit (set that the position attribute value should be inherited from the parent element .)
The following lists some instance code for various attributes:
1. absolute attributes
<Html>
<Head>
<Style type = "text/css">
H2.pos _ abs {
Position: absolute;
Left: 100px;
Top: 150px
}
</Style>
</Head>
<Body>
<H2 class = "pos_abs"> This is an absolute positioning title. <P> with absolute positioning, elements can be placed anywhere on the page. The title below is Px to the left of the page and PX to the top of the page. </P>
</Body>
</Html>
2. relative attributes ()
<Html>
<Head>
<Style type = "text/css">
H2.pos _ left {
Position: relative;
Left:-20px
}
H2.pos _ right {
Position: relative;
Left: 20px
}
</Style>
</Head>
<Body>
<H2> This is the title in the normal position <H2 class = "pos_left"> This title moves left relative to its normal position <H2 class = "pos_right"> This title moves to the right relative to its normal position <P> relative positioning moves the element based on its original position. </P>
<P> style "left:-20px": Subtract 20 pixels from the original left position of the element. </P>
<P> the style "left: 20px" adds 20 pixels to the left-side position of the element. </P>
</Body>
</Html>
3. fixed attributes
<Html>
<Head>
<Style type = "text/css">
P. one {
Position: fixed;
Left: 5px;
Top: 5px;
}
P. two {
Position: fixed;
Top: 30px;
Right: 5px;
}
</Style>
</Head>
<Body>
<P class = "one"> some text. </P>
<P class = "two"> more text. </P>
</Body>
</Html>
When locating an element, if there is a conflict between the two elements, you can use the z-index attribute to set the priority for the element. z-index can be used to place one element after another, the default value is 0. Assume that the z-index attribute of two elements A and B and A is 0 by default, and the z-index attribute of B is set to-1, the priority of Element B is lower than that of Element.
So what is absolute positioning and relative positioning?
1. Absolute positioning: the element is located in the upper-left corner of the browser page, and the element is detached from the document stream without occupying space. The element layout in the normal Document Stream is like the absolute positioning element does not exist. In short, the positioning element is separated from the document stream and floating model, independent of other objects and has no placeholder.
2. relative positioning: if an element is relatively located, it first appears at the position where it appears, and then through the vertical or horizontal position, move the element relative to its original starting point. Relative positioning does not remove an element from the document stream. The element is further located relative to its original positioning, and its original placeholder information still exists.
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
