CSS定位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43909372/article/details/104626252

CSS定位

在css的定位中，有一个position属性，用实现定位。
定位的种类有
1.static(静态定位)默认
2.relative定位(相对定位)
3.absolute定位(绝对定位)
4.fixed(固定定位)

1.static(静态定位)默认

静态定位的元素不会受到 top, bottom, left, right 和z-index影响。它是系统默认的定位。一般的元素的定位都是静态定位。

2.relative定位(相对定位)

相对定位依然没有脱离文档流，其内容依然会存在以及填充父元素。
如果不进行移动操作，本身相对于更高级元素不会发生任何改变。但会对有定位的子元素有一定的影响。
可以使用top、right、bottom、left进行相对于原先自身进行定位。
可以使用z-index进行在z轴方向上的移动，实现显示的先后顺序。在这里插入图片描述
定义一个父盒子和两个子盒子

2.1、给box1 设置相对定位

.div{background-color: #2A80B9;width: 200px;}
.box1{width: 100px;height: 100px;background-color: green;position: relative;}
.box2{width: 100px;height: 100px;background-color: red;}

在这里插入图片描述
元素内容并没有发生变化

2.2 移动box1 box2

使用top、right、bottom、left进行定位

.box1{width: 100px;height: 100px;background-color: green;position: relative;top: 20px;left: 20px;}
.box1{width: 100px;height: 100px;background-color: green;position: relative;bottom: 20px;right: 20px;}

在这里插入图片描述
父元素并没有塌陷，依然被填充。子元素相对于自身原来的位置进行移动定位。

2.3 结论

相对定位依然没有脱离文档流，其内容依然会存在以及填充父元素。元素的定位靠top right bottom left 进行移动。
注：当元素中同时都有top right bottom left定位时，已top 和left的数值为准

3.absolute定位(绝对定位)

相对最近父元素，原有空间不保留会被其他元素挤占。宽度为文本宽度，且宽度不会影响父元素宽度。
如果不进行移动操作，本身位置不会发生改变。
可以使用top、right、bottom、left进行进行定位，会以相对于最近的且不是static定位的父元素来定位，如果没有父级元素，就以根节点。
可以使用z-index进行在z轴方向上的移动，实现显示的先后顺序。

3.1、给box1 设置绝对定位

.box1{width: 100px;height: 100px;background-color: green;position: absolute;}

在这里插入图片描述
原本的文档流空间消失。在没有进行定位操作时不改变原有位置。

3.2 移动box1

使用top、right、bottom、left进行定位

	.box1{width: 100px;height: 100px;background-color: green;position: absolute;top: 100px;left: 100px;right: 100px;border: 100px;}

在这里插入图片描述
进行定位后，相对与窗口进行了定位。

3.3 给父元素添加定位（除start）

			.div{background-color: #2A80B9;width: 200px;margin-left: 200px;position: relative;}

在这里插入图片描述

相对与父元素进行了定位，但依然不填充父元素。

3.4 结论

相对定位脱离文档流，其内容不再填充父元素。元素的定位靠top right bottom left 进行移动。会以相对于最近的且不是static定位的父元素来定位，如果没有父级元素，就以根节点。
注：当元素中同时都有top right bottom left定位时，已top 和left的数值为准。

4.fixed(固定定位)

从文档流中消失。
可以使用top、right、bottom、left进行进行定位，会以相对窗口进行定位。
可以使用z-index进行在z轴方向上的移动，实现显示的先后顺序。

4.1、给box1 设置固定定位

.box1{width: 100px;height: 100px;background-color: green;position: fixed;right: 0;top: 0;}

在这里插入图片描述
固定定位是一种相对与窗口的定位。它不会随着页面的移动而发生移动，始终会在已经进行定位的窗口位置进行显示。
是一种常见的广告和快速寻找页面的定位方式。

4.4 结论

固定定位脱离文档流，其内容不再填充父元素。元素的定位靠top right bottom left 进行移动。会以相对于窗口进行显示。
注：当元素中同时都有top right bottom left定位时，已top 和left的数值为准。