How to understand the position attribute value and its characteristics-CSS Tutorial-php.cn

How to understand the position attribute value and its characteristics

清浅

Release： 2019-03-05 11:20:42

Original

4348 people have browsed it

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

How to understand the position attribute value and its characteristics

[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>

Copy after login

Rendering:

How to understand the position attribute value and its characteristics

## 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>

Copy after login

Rendering:

How to understand the position attribute value and its characteristics

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)

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

Copy after login

Rendering:

Image 039.png

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>

Copy after login

Rendering:

Image 040.png

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!