梦入琼楼寒有月，行过石树冻无烟

CSS 位置

2022-04-21

文档流（static）

如无特殊定位，则按照文档流进行位置排版

1
2
3
4
5
6
7
8
9
<style>
	img {
		position: static;
	}
</style>
<body>
	<img src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img src="http://zsdk.org.cn/img/Joint_ZhongShan/Khan.png">
</body>

固定流（fixed）

1
2
3
4
5
6
7
8
9
10
<style>
.p1 {
	position: fixed;
	top: 2px;
	right: 10px;
	}
</style>
<body>
	<p class="p1">2020年12月5日</p>
</body>

左右定位（relative）

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.p1 {
	position: relative;
	left: 110px;
	}
.p2 {
	position: relative;
	left: -12px;
</style>
<body>
	<p class="p1">右</p>
	<p class="p2">左</p>
</body>

绝对定位（absolute）

1
2
3
4
5
6
7
8
9
10
11
<style>
.p1 {
	position: absolute;
	left: 60px;
	top: 20px
	}
</style>
<body>
	<p>Hello:</p>
	<p class="p1">world!</p>
</body>

固定位置（-webkit-sticky）

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.p1{
  	position: -webkit-sticky;
  	position: sticky;
	top: 0px;
	}
</style>
<body>
	<br>
	<p class="p1">我是固定的</p>
	<br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>

重叠样式（z-index）

1
2
3
4
5
6
7
8
9
10
<style>
.index {
	position:absolute;
	z-index: -1;
	}
</style>
<body>
	<img class="index" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<p style="position: absolute;top: 2px;">Jiangxue.org.cn</p>
</body>

浮动流（float）

1
2
3
4
5
6
7
8
9
<style>
.float {
	float: right;
	}
</style>
<body>
	<img class="float" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<p>江雪分析（JIANGXUE ANALYSIS）成立于2018年12月，是国内首家非盈利性质的计算机端口安全及多边安全研究团队。主要致力于计算机端口安全的研发和防护等相关方面的安全模型制定和防护系统的维护及开发，也是钟山计算机端口安全联合团队之一。</p>
</body>

图片浮动流（left）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.fwhm {
	float: left;
	width: 200px;
	height: 50px;
	
	/*距离*/
	margin: 10px;
	}
</style>
<body>
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
	<img class="fwhm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
</body>
ID DE FA
static 文档流 position
fixed 固定流
relative 左右定位
absolute 绝对定位
-webkit-sticky 固定位置
z-index 重叠样式 z-index
right 使用浮动流 float
left 向左浮动
margin 距离 margin
⬅️ Go back