How to understand the position attribute value and its characteristics

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

	

	
使用了 position: static;

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;
}



	
父元素
	
子元素
	

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 aspects

1. 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 elements

3. Make the block element expand by the content when the width is not set

4. 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)

	
父元素
	
子元素
	

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

	
固定元素

Rendering:

Summary : The above is the entire content of this article, I hope it will be helpful to everyone.

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!