CSS定位详解

老电影故事

已于 2023-04-19 11:24:44 修改

阅读量4.3k

点赞数 9

分类专栏： CSS 文章标签：前端 es6 ecmascript

于 2021-11-25 00:08:58 首次发布

本文链接：https://blog.csdn.net/weixin_44582045/article/details/121527574

版权

CSS 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

一、CSS position

CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。

在这里插入图片描述

二、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

1、对边偏移无效。
2、一般用来清除定位的
3、一个有定位的盒子不想再有定位了，加上 position:static;就可以了

三、相对定位（relative）

1、相对定位可以通过边偏移来移动位置，但是原来的位置继续占有。
2、每次移动的时候，都是以自己的左上角为起点的，（相对于自己原来的位置）原来的位置继续占有。
3、相对定位的盒子仍在标准流中，不影响其他元素布局。
4、如果说浮动是让多个块级元素一行显示，那么定位的价值是让我们的盒子移动到我们想要的位置上去。

在这里插入图片描述

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

在这里插入图片描述

四、绝对定位（absolute）

1、绝对定位的元素脱离了文档流，绝对定位元素不占据空间
2、具备内联盒子特性：宽度由内容绝对
3、具备块级盒子特性：支持所有样式
4、绝对定位元素相当于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

将class="two"的div定位到距离的顶部和左侧分别50px的位置。会改变其他元素的布局，不会在此元素本来位置留下空白。
在这里插入图片描述
子绝父相
子绝对定位，父亲相对定位。
相对定位占有位置不脱标
绝对定位不占有位置脱标
在实际开发中这个口诀用的很多

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这句话的意思是：子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
在这里插入图片描述

五、固定定位（fixed）

1、固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
2、具备内联盒子特性：宽度由内容绝对
3、具备块级盒子特性：支持所有样式
4、不受祖先元素影响
5、固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

在这里插入图片描述

六、粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

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

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

<style>
	div.sticky {
	  position: -webkit-sticky;
	  position: sticky;
	  top: 0;
	  padding: 5px;
	  background-color: #cae8ca;
	  border: 2px solid #4CAF50;
	}
</style>

总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

老电影故事

关注

9
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS定位详解

一、CSS positionCSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。二、静态定位（static）一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。1、对边偏移无效。2、一般用来清除定位的3、一个有定位的盒子不想再有定位了，加上 position:static;就可以了三、相对定位（relati
复制链接

扫一扫