Home > Article > Web Front-end > How to understand the position attribute value and its characteristics
How to understand the position attribute value and its characteristics
- 清浅Original
- 2019-03-05 11:20:424350browse
The position positioning attribute has four attribute values: static, the default value means no positioning, relative positioning is positioning relative to itself, absolute positioning is positioning relative to the positioned parent element, fixed fixed positioning is relative to the browse Device window positioning
Today we will introduce the various attribute values and characteristics of the positioning attribute in CSS. It has a certain reference effect and I hope it will be helpful to everyone in learning positioning
[Recommended course: CSS tutorial]
position attribute
position Attributes are used to specify the positioning type of an element, that is, placing the element in a static, relative, absolute, or fixed position. Therefore, in the position attribute, it has four attribute values: static, relative, absolute, and fixed. Next, the usage and characteristics of these four attribute values will be introduced in detail in the article.
static attribute value
The static attribute indicates the default value, that is, there is no positioning and the element appears in the normal flow. Ignore top, bottom, left, right or z-index declaration
<style>
div{
width:100px;
height:100px;
border:10px solid #ccc;
}
div.static {
position: static;
border: 10px solid pink;
}
</style>
</head>
<body>
<div></div>
<div class="static">使用了 position: static;</div>
</body>Rendering:
## The #relative attribute value
represents a relatively positioned element, which can be positioned relative to its normal (original) position through the settings of top, bottom, left, and right. It is positioned by default with reference to the origin point of the parent as the origin point. If there is no parent element, it is positioned according to the bottom of the previous element as the origin point. 1. Relative positioning will not affect the characteristics of the element itself 2. It will not cause the element to break away from the document flow (the original position of the element will be retained) 3. There is no positioning bias It has no effect on the element when moving.4. To improve the level, you can use z-index to change the hierarchical relationship of a positioned element, thereby changing the coverage relationship of the element. The larger the value, the higher it is.div{
width:200px;
height:200px;
background-color: pink;
}
div.relative {
position: relative;
background-color:lightblue;
left:45px;
}
</style>
</head>
<body>
<div>父元素
<div class="relative">子元素</div>
</div>
</body>
Rendering:
absolute attribute value
represents an absolutely positioned element, relative Positioned on the first parent element other than static positioning. Its characteristics include the following aspects1. The element is completely separated from the document flow, that is, it no longer takes up space in the document flow.2. The characteristics of the inline element can be changed, that is, it is You can set the width and height in inline elements3. Make the block element expand by the content when the width is not set4. Offset relative to the nearest positioned parent element. If its parent element is not positioned, it will be searched layer by layer until the body is found. 5. Relative positioning is generally used in conjunction with absolute positioning (the child must be the same as the father)<style>
div{
width:200px;
height:200px;
background-color: pink;
}
div.absolute {
position:absolute;
background-color:lightblue;
left:145px;
top:140px;
}
</style>
</head>
<body>
<div>父元素
<div class="absolute">子元素</div>
</div>Rendering: 
fixed attribute value
represents a fixed attribute value, generates an absolutely positioned element, and positions it relative to the browser window. That is, no matter how you scroll the scroll bar, the element still remains at that position<style>
body{height: 2000px;}
div.fixed {
width:200px;
height:200px;
position:fixed;
background-color:lightblue;
left:145px;
top:140px;
}
</style>
</head>
<body>
<div class="fixed">固定元素</div>
</body>
Rendering:
The above is the detailed content of How to understand the position attribute value and its characteristics. For more information, please follow other related articles on the PHP Chinese website!