css中position的探讨

发表于

position属性值

在定位的时候都会接触到一个名词文档流，文档流大意就是元素在文档中的排列顺序，从左到右，从上到下排列和显示。float和 position可以使元素脱离文档流。

static(默认值)

元素按照文档流显示，不受left、right、top和bottom影响；

relative(相对定位)

相对定位是以元素原本所在位置为参考，保留原本占据的位置，不会对相邻的元素产生影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//html
<div>
	<div class='first'></div>
	<div class='second'></div>
	<div class='third'></div>
</div>
//css
.first{
	width: 100px;
	height: 100px;
	background-color: green;
}
.second{
	width: 100px;
	height: 100px;
	background-color: red;
    position:relative;
    top:10px;
    opacity:0.3;
}
.third{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

image
从效果图看出，第二个元素position属性设置了relative，以自身原本的文字向下偏移10px，没有对第一和第三个元素产生影响。如果设置相对定位，同时对top(对象相对原位置向下偏移的距离)和bottom(对象相对原位置向上偏移的距离)赋值，只有top起作用。同理，同时对left(对象相对原位置向左偏移的距离)和right(对象相对原位置向右偏移的距离)赋值，只有left起作用。

absolute(绝对定位)

元素设置为绝对定位后会脱离文档流，相对于第一个position属性不为static的父级元素进行定位，如果所有的父级元素都未设置position属性，则以document元素进行定位。在网页中document元素指的就是html。如果设置绝对定位，同时对top(对象相对原位置向下偏移的距离)和bottom(对象相对原位置向上偏移的距离)赋值，只有top起作用。同理，同时对left(对象相对原位置向左偏移的距离)和right(对象相对原位置向右偏移的距离)赋值，只有left起作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//html
<body>
	<div class='parent'>
		<div class='first'></div>
		<div class='second'></div>
		<div class='third'></div>
	</div>
</body>
//css
body{
	width:800px;
	height:500px;
	border:5px solid;
}
.parent{
	width: 600px;
	height: 500px;
	position: relative; /*absolute效果一致*/
	background-color: pink;
}
.first{
	width: 100px;
	height: 100px;
	background-color: green;
}
.second{
	width: 100px;
	height: 100px;
	background-color: red;
    position:absolute;
    left:100px;
}
.third{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

image
如果父元素没有设置定位，此时是以html元素为参考定位的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
	width:800px;
	height:500px;
	border:5px solid;
	margin: 50px;
}
.parent{
	width: 600px;
	height: 500px;
	background-color: pink;
}
.first{
	width: 100px;
	height: 100px;
	background-color: green;
}
.second{
	width: 100px;
	height: 100px;
	background-color: red;
    position:absolute;
    left:100px;
}
.third{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

image

fixed(固定定位)

设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//html
<div class='parent'>
	<div class='first'></div>
	<div class='second'></div>
	<div class='third'></div>
</div>
//css
.parent{
	width: 600px;
	height: 500px;
	background-color: pink;
	position: relative; /*这里的定位元素不会对子元素内fixed定位元素产生影响*/
	left:30px
}
.first{
	width: 100px;
	height: 100px;
	background-color: green;
}
.second{
	width: 100px;
	height: 100px;
	background-color: red;
    position:fixed;
    left:100px;
}
.third{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

image
固定定位也不是完全以浏览器窗口定位参考，在网上看到过这样一个问题,重新设置parent样式

1
2
3
4
5
6
7
.parent{
	width: 600px;
	height: 500px;
	background-color: pink;
	transform: translateX(30px);
	
}

image
同样将父元素向左偏移30px,使用transform实现，此时第二个子元素定位的表现和absolute类似，以父元素为参考定位。

sticky

sticky的效果就是在一个内容中，我们可以固定一个部分，然后到了另一个内容，又会固定另外一个部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
//html
<div class="wrap">
    <div class="header">
        这是头部
    </div>
    <div class="content">
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
    </div>
</div>
<div class="wrap">
    <div class="header">
        这是另一个头部
    </div>
    <div class="content">
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
    </div>
</div>
//css
body {
    margin: 0;
    padding: 0;
}
.wrap {
    border: 20px solid blue;
}
.header {
    position: sticky;
    top: 20px;
    border: 20px solid red;
    margin-top: 20px;
}

position与display

元素分为内联元素和区块元素，在内联元素中是不能设置width和 height样式。
1.relative：原来是什么类型的依旧是什么类型。
2.absolute | fixed ： 元素就被重置为了区块元素。

position与float

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是relative却可以。因为它原本所占的空间仍然占据文档流。