How to use css positioning attribute (detailed explanation with examples)

This article brings you relevant knowledge about the position positioning attribute in CSS. Position is used as an attribute to specify the positioning type of an element. Different attribute values ​​have different positioning styles. I hope it will be helpful to everyone.

Position

background-position Background position

If, when it comes to floating, the key lies in the word "floating", then the key to our positioning lies in a "position".

PS: Positioning is one of the most difficult aspects of our CSS, but you must learn it well. Our CSS is inseparable from positioning, especially the subsequent js special effects, which we deal with positioning every day. Don't resist it, but fall in love with it. It can make our work easier!

Why use positioning?

So positioning, where is the longest application scenario? Take a look at a few pictures, you will definitely have some insights!

1. The small yellow block can be moved on the picture:
   

2. Press the left and right arrows on the picture:
   

3. hot There is an extra piece outside the box, which is more prominent:
   
   If you use standard streams or floats in the above three small places, the implementation will be more complicated. Or it is difficult to achieve, at this time we use positioning to do it.

Positioning attributes of elements

Positioning attributes of elements mainly include positioning mode and edge offset.
1. Edge offset

Edge offset attribute	Description
top	Top offset, defines the distance of the element relative to the upper edge of its parent element
bottom	Bottom offset Amount, defines the distance of the element relative to the bottom line of its parent element
left	Left offset, defines the distance of the element relative to the left edge of its parent element
right	Right offset, defines the distance of the element relative to the right line of its parent element

In other words, in the future, positioning will be used in conjunction with the offset here, such as top: 100px; left: 30px; etc.

2. Positioning mode (positioning classification)

In CSS , the position attribute is used to define the positioning mode of the element. Its basic syntax format is as follows:

Selector {position: attribute value;}

Common values ​​for the position attribute

##staticAuto positioning (Default positioning method) relativeRelative positioning, positioned relative to the position of its original document flow##absolute fixed

Static positioning (static)

Static positioning is the default positioning method for all elements. When the value of the position attribute is static, the element can be positioned in a static position. The so-called static position is the default position of each element in the HTML document flow.

The above words are translated into vernacular: All elements in the web page are statically positioned by default. In fact, it is the characteristic of standard stream.

In the static positioning state, the position of the element cannot be changed through the edge offset attribute (top, bottom, left or right).

In fact, it’s nothing. The only use of static positioning is: is to cancel positioning. position: static;

Relative positioning relative(narcissistic type)

Relative positioning is to position the element relative to its position in the standard flow. When the value of the position attribute is relative , you can position the element in a relative (own) position .

After setting relative positioning for an element, you can change the position of the element through the edge offset attribute, but its position in the document flow will still be retained (retain the original position). As shown in the figure below, it is a demonstration of the effect of relative positioning:

Note:

1. The most important thing about relative positioning is that it can Move the position through edge offset, but the original occupied position continues to occupy .
2. Secondly, The position of each move, is based on the upper left corner of oneself (moving the position relative to oneself)

That is to say, the relatively positioned box is still in the standard flow, and the boxes behind it still treat it in the standard flow manner. (Relative positioning is not off-label)

If the main purpose of floating is to display multiple block-level elements in one line, then the main value of positioning is to move the position to make the box where we want it position.

Absolute positioning absolute (pin dad type)

[Note] If the document is scrollable, absolutely positioned elements will scroll with it because the element will eventually be relative to the normal Locate a certain part of the stream.

When the value of the position attribute is absolute, the positioning mode of the element can be set to absolute positioning.

Note: The most important thing about absolute positioning is that it can move the position through edge offset, but it is completely off-label , does not occupy the position at all.

Absolute positioning is divided into three situations:

1. The parent is not positioned

If all parent elements are not positioned, the browser The current screen is aligned (document document).

2. The parent is positioned

Absolute positioning is to position the element based on the nearest parent element (ancestor) that has been positioned (absolute, fixed or relative positioning) ) for positioning.

3. The child must be the same as the father※※

This sentence means that if the child is absolutely positioned, the parent must be relative position.

First of all, let's talk about it. Absolute positioning is to position the element according to the nearest parent element (ancestor) that has been positioned absolute, fixed or relative).

That is to say, The child is absolutely positioned, and the father only needs to be positioned (regardless of whether the father is absolutely positioned or relatively positioned, or even fixed positioning), that is to say, the child must be positioned Both the father and the son are correct. However, it is highly recommended to use relative positioning

However, when we layout our web pages, how does the most commonly mentioned image of son and father come from? Please see the picture below:

Therefore, we can draw the following conclusion:

Because the child is absolutely positioned and will not occupy the position, it can be placed inside the parent box any place.

When the parent box is laid out, it needs to occupy a position, so the father can only be relatively positioned.

This is the origin of the child's father-like appearance.

Absolutely positioned boxes are centered horizontally/vertically

Ordinary boxes have left and right margins, which can be changed to auto, but it is invalid for absolute positioning

Positioned boxes can also be used There is an algorithm for horizontal or vertical centering.

1. First left 50% half the size of the parent box
2. Then add half the negative value of your own margin-left.

Code example

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*margin: 100px auto;*/
		/*float: left;*/
		position: absolute;
		/*加了定位 浮动的的盒子  margin 0 auto 失效了*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style></head><body>
	<p></p></body></html>

Fixed positioning fixed (resigned to death)

Fixed positioning is a special form of absolute positioning, similar to a square. Special rectangle. It uses the browser window as a reference to define web page elements. When the value of the position attribute is fixed, the positioning mode of the element can be set to fixed positioning.

When a fixed positioning is set to an element, it will break away from the control of the standard document flow and always define its display position according to the browser window. No matter how the browser scroll bar scrolls or the size of the browser window changes, the element will always be displayed at a fixed position in the browser window.

There are two points in fixed positioning:

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

Value	Description
Absolute positioning, positioned relative to its previous positioned parent element
Fixed positioning, positioned relative to the browser window

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式，

行内块 的宽度和高度 跟内容有关系

** 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

顺丰案例

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.sf {
			width: 1259px;
			height: 472px;
			margin: 100px auto;
			position: relative;
		}
		.nav {
			width: 960px;
			height: 80px;
			background-color: #000;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -480px;
		}
		.nav li {
			list-style-type: none;
			width: 160px;
			height: 80px;
			float: left;
		}
		.nav li a {
			width: 160px;
			height: 80px;
			display: block;
			text-align: center;
			line-height: 80px;
			color: #fff;
			text-decoration: none;
		}
		.nav li a:hover {
			color: #000;
			background-color: #fff;
		}

	</style></head><body>
	<p class="sf">
		<a href="#">
			<img src="images/sf.png" alt=""    style="max-width:90%" width="1259">
		</a>
		<p class="nav">
			<ul>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
				<li><a href="#">快递查询</a></li>
			</ul>

		</p>
	</p></body></html>

（学习视频分享：css视频教程）

The above is the detailed content of How to use css positioning attribute (detailed explanation with examples). For more information, please follow other related articles on the PHP Chinese website!