CSS-position:absolute,relative,static,fixed,sticky属性用法

最新推荐文章于 2023-10-21 09:42:12 发布

THIM

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量371

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_50767141/article/details/115532325

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS position

类型
static
relative
absolute
fixed
sticky

static 是html的默认值，对于top, right, left, bottom等设定值不会生效

下面代码设定了盒子（box）

position类型static

none为未定义类型的position（这是为了证明static为html默认值）

在这里插入图片描述

在这里插入图片描述
下面为结果测试值：

在这里插入图片描述

position类型absolute

absolute定义为左上角开始利用top，bottom，right, left进行调整

absolute 并不会受其他元素影响，但会随滚动条的移动而移动

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

absolute并列的表示中会因为定位位置被叠加

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

absolute中叠加absolute会在上一层absolute的位置的基础上进行移动

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

position类型relative

relative会根据整个页面的元素进行移动

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

举例当我再加一个盒子上去之后：

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

relative和absolute可以一起用

Absolute可以放在relative里面进行局部定位

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

position类型fixed

fixed会将元素定位在当前的页面的摸个位置，不随滚动条的移动而移动

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

position类型sticky

这边我将sticky置顶top：0；意思为，当sticky碰到顶端时，就随滚动条向下移动

在这里插入图片描述

下面为结果测试值：

在这里插入图片描述

THIM

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS-position:absolute,relative,static,fixed,sticky属性用法

CSS position类型staticrelativeabsolutefixedstickystatic 是html的默认值，对于top, right, left, bottom等设定值不会生效下面代码设定了盒子（box）position类型staticnone为未定义类型的position（这是为了证明static为html默认值）下面为结果测试值：position类型absoluteabsolute定义为左上角开始利用top，bot
复制链接

扫一扫