CSS---position属性(超详解)

最新推荐文章于 2024-04-24 23:50:15 发布

Philo`

最新推荐文章于 2024-04-24 23:50:15 发布

阅读量1.2k

点赞数 3

分类专栏： HTML/CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44864833/article/details/122445867

版权

HTML/CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

这里写目录标题

一、是什么？

CSS position:属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left属性则决定了该元素的最终位置。

二、取值有哪些？

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

三、案例详解

相对定位：

在这里插入图片描述

在html布局中：水平向右为正，垂直向下为正，本例设置盒子two的position为relative，则其原本的位置还保存着，但是实际的位置通left和top向左向下偏移。

绝对定位

在这里插入图片描述

在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。这里相对于整个布局，向下向右偏移了20px。

固定定位

在这里插入图片描述

该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素，即盒子one的位置为固定定位，是基于整个页面布局来说，它的位置是不变的。

粘性定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div.sticky {
				position: sticky;
				top: 0;
				padding: 5px;
				background-color: #cae8ca;
				border: 1px solid #00557f;
			}
		</style>
	</head>
	<body>

		<p>尝试滚动页面。</p>
		<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

		<div class="sticky">我是粘性定位!</div>

		<div style="padding-bottom:2000px">
			<p>滚动我</p>
			<p>来回滚动我</p>
			<p>滚动我</p>
			<p>来回滚动我</p>
			<p>滚动我</p>
			<p>来回滚动我</p>
		</div>

	</body>
</html>

运行展示链接：粘性定位
这里粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

四、总结

关键字	说明	性质
static	默认定位	不设置position时，不可使用top，left等属性
relative	相对定位	元素`占据`原来位置，用top left等属性进行基于`原位置`的偏移
absolute	绝对定位	元素`不占据`原来位置，用top left等属性进行基于`祖先元素`的偏移
fixed	固定定位	元素`不占据`原来位置，用top left等属性进行基于`整体页面`的偏移
sticky	粘性定位	用top left等属性进行偏移，偏移值不会影响任何其他元素的位置