Home > Developer > JavaScript
CSS positioning attribute position, css positioning position
CSS positioning elements can be set to common streams, relative positions, and absolute positions. Set the position attribute.
| Inherit | Inherits the value of the position attribute of the parent element. |
Static |
Default Value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ). |
Relative |
Generate relative positioning elements, relativeNormal Element position. Therefore, "left: 20" adds 20 pixels to the LEFT position of the element. |
Absolute |
Generate absolute positioning elements and findThe first non-static ancestor Element. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
Fixed |
Generate absolute positioning elements, relativeBrowser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
Normal stream positioning is static. By default, the relative position of the positioning is: relative, relative to the element itself as the normal stream location, occupies the original position of the Document Stream
There are two types of absolute location positioning: absolute and fixed. One is the first non-static ancestor element relative to the current user, and the other is relative to the browser window, which does not occupy the original file stream location.
Example 1: static normal stream positioning, the top attribute of the red div is invalid
<Body> <div style = "border: solid 1px #0e0; width: 200px;"> <div style = "height: 100px; width: 100px; background-color: red; top: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: green; "> </div> <div style =" height: 100px; width: 100px; background-color: blue; "> </div> </body>
Example 2: relative position of relative. The relative static position of the green div moves 20 Px to the right and down, and the original document position of the green div is still in place.
<Body> <div style = "border: solid 1px #0e0; width: 200px;"> <div style = "height: 100px; width: 100px; background-color: red; top: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: green; position: relative; top: 20px; left: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: blue; "> </div> </body>
Example 3.1: absolute position (does not occupy the original document stream position). If the position attribute of the parent element div is not specified, the parent div of the green div is static, therefore, if you do not select this div as the reference, select window as the reference.
<Body> <div style = "border: solid 1px #0e0; width: 200px;"> <div style = "height: 100px; width: 100px; background-color: red; top: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: green; position: absolute; top: 20px; left: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: blue; "> </div> </body>
Example 3.2: absolute is an absolute position. The position of the parent div is relative and is no longer static. Therefore, select the parent div for reference.
<Body> <div style = "border: solid 1px #0e0; width: 200px; position: relative;"> <div style = "height: 100px; width: 100px; background-color: red; top: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: green; position: absolute; top: 20px; left: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: blue; "> </div> </body>
Example 4: fixed absolute position, which does not occupy the Document Stream position relative to the window. Body> <div style = "border: solid 1px #0e0; width: 200px; position: relative;"> <div style = "height: 100px; width: 100px; background-color: red; top: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: green; position: fixed; bottom: 20px; left: 20px; "> </div> <div style =" height: 100px; width: 100px; background-color: blue; "> </div> </body>
The disadvantage is that it is troublesome, and it is not conducive to modifying the overall layout. DIV first you need to understand its principle, the relationship between layers. Rather than simply emphasizing the position of px. The location where the layout is located is probably some special places such as local location adjustment and layer buttons on the layer. It is not recommended to write positioning in a normal layout. Generally, the background is the most frequently used, especially for portal websites. You can save the background of the websites and check whether they are a huge image, almost all the images needed on the pages are included, and different backgrounds are located based on the image location. This is the usage of DIV.
What are the differences between the four attributes of CSS position?
Absolute
Generates absolute positioning elements, which are located relative to the first parent element other than static positioning.
The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.
Example: www.w3school.com.cn/...solute
Fixed
Generates absolute positioning elements, which are located relative to the browser window.
The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.
Example: www.w3school.com.cn/..._fixed
Relative
Generates relative positioning elements and locates them relative to their normal locations.
Therefore, "left: 20" adds 20 pixels to the LEFT position of the element.
Static default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ).
Example: www.w3school.com.cn/...lative
Inherit specifies that the value of the position attribute should be inherited from the parent element.
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
