css 中常用position(定位)

最新推荐文章于 2025-08-01 23:32:40 发布
最新推荐文章于 2025-08-01 23:32:40 发布
阅读量113 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45764245/article/details/119909339
position
sticky:首行固定的效果
fixed:固定在页面中的某一个位置
absolute:根据父组件position进行定位<也称绝对定位>
relative:根据元素当前所在位置进行定位<也称相对定位>
z-index根据数值来调整position元素之间层级的关系达到遮罩效果
【css中position属性详解】
Emnational的博客
05-05 370
属性用于定义元素的定位方式，结合 和 属性控制元素位置。 2. (相对定位) 特性 元素保留原始文档流位置 通过 /// 相对于原始位置偏移 会创建新的层叠上下文 3. (绝对定位) 特性 元素脱离文档流 相对于最近的非 定位祖先元素定位 如果没有定位祖先，则相对于 根元素 常用组合：父元素 + 子元素 4. (固定定位) 特性 元素脱离文档流 相对于浏览器视口 (viewport) 定位 滚动页面时保持固定位置 常见应用：固定导航栏、弹窗
CSS中Position四个属性的使用介绍
12-10
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文将详细解析CSS中`position`属性的四个值：`static`、`relative`、`absolute`和`fixed`，以及它们各自的特点和应用场景。 ...
【前端基础知识】css position
Dai的博客
02-08 875
【前端基础知识】css position
微信小程序--组件覆盖之position和z-index
热门推荐
一如年少丶的博客
08-25 2万+
在写页面的时候，我们常常会有这样的需求，就是将一个组件置于另一个组件之上。那么，该如何来实现呢？ 其实，非常简单我们只需要在wxss里设置好position和z-index这两个属性就好了 1.父组件，必须将其position属性设置为relative .uploader-img { /* display: block; */ position: absolute; z-ind...
position常见的几种属性
weixin_51959098的博客
11-21 7842
1、static：默认值，在没有设置position属性的时候，position默认为static 在文档（页面）中占位置。 2、relative：相对定位。在使用top或者left进行位置移动的时候，参考的位置是自己原先（没有定位时）所在的位置。 在文档（页面）中占位置。 3、absolute：绝对定位。在没有父元素（直接书写在body下面），或者有父元素，但是父元素没有设置position的值，就是没有定位时（static属性称无定位）在进行top或者left等偏移位置时，参考的偏移位置为浏览
position 属性的常用的5种取值
qq_41306423的博客
06-22 1万+
日期：2020 年 6 月 22 日 position 属性 前言 说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易 废话不多说，正文开始 小序 position 属性的取值有：static | relative | absolute | fixe
css定位、position与float同时使用的情况
sunsineq的专栏
11-25 1149
　　一、css定位 　　　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 　　　　　　1.普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。 　　　　　　2.绝对定位：position:absolute/fixed;元素框脱离普通文档流。　　 　　　　　　3.浮动：float:left/right;元素脱离普通文档流。 　　二、对元素同时使用position和float的情况 　　　　经过实践发现.
CSS Position(定位)
likuoelie的博客
07-24 847
属性值是否脱离文档流是否占位相对谁定位是否随页面滚动static否是无是relative否是元素自身是absolute✅ 是❌ 否最近非 static 祖先否fixed✅ 是❌ 否浏览器窗口❌ 否（固定）sticky部分脱离是最近滚动容器滚动到位后 ❌ 否使用position可以让你精确控制元素的位置，在布局、弹出、吸顶、悬浮等场景中非常关键。理解每种值的含义与应用，是前端布局的核心能力。如需具体布局案例（如卡片、弹窗、导航栏等），也欢迎继续提问！
深究CSS定位position的常用技法
01-19
本文针对CSS常用的6个属性进行探究，大家一定会对这篇文章满意的。 1.position:static static属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。 2.position:...
CSS实现模拟position的fixed页面定位效果
09-25
在网页设计中，`position: fixed` 是一种常用的CSS定位方式，它可以将元素固定在视口的某个位置，即使页面滚动，该元素也会保持在屏幕的特定位置。然而，有些老旧的浏览器或特殊环境下可能不支持 `position: fixed`...
position的属性(sticky属性)
ganlubaba666的博客
03-24 3285
position的属性对position所有的属性的介绍sticky属性定义demosticky生效以及失效fixed属性定义demoabsolute属性定义relative属性定义demo 对position所有的属性的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position sticky属性 定义 粘性定位元素（stickily ...
position的常用属性
weixin_41390717的博客
12-03 1199
写在前面 为了制作更多复杂的布局，我们经常要用到 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，了解到如何正确舒服地使用。 static .static { position: static; } relative .relative1 { position: relative; } .relative2 { position:...
position定位
weixin_43795084的博客
12-02 260
1.static(没有定位，不能偏移，也就是left等不生效) 所有的元素如果不进行定位，默认都为static 2.absloute（绝对定位） 设置为absolute，它需要向上找一个定位的父元素（也就是被设置了除static以外的值）为基准来定位， 如果没有，则就会以浏览器窗口为基准定位。 3.relative(相对定位) 相对的意思就是相对于其正常的位置(也就是为static)的时候，以它为基准，进行偏移 fixed（绝对定位） 以浏览器窗口为基准进行定位 inherit(继承)
CSS中position属性有什么定位？又有什么区别？与float同时使用时有什么影响？
qq_39280289的博客
09-21 303
position属性中的各种定位简记： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。 没有定位，元素出现在普通流中（忽略 top, bottom, left, right z-index 声明）。 inherit...
css初学者第二天
2302_80368910的博客
07-30 710
css text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes（3D背景盒子组件）
sunbyte带你学
07-30 1799
使用Vue 3和Tailwind CSS实现的3D背景盒子交互组件。该组件通过动态生成4×4的盒子网格，点击"Magic"按钮可触发整体缩放和3D旋转动画。技术亮点包括：使用Vue的<script setup>语法管理响应式状态，通过v-for循环生成16个盒子，利用背景定位实现Gif动画的分块显示，并添加3D边框效果增强立体感。
32. flex 的子元素可以浮动吗
最新发布
weixin_64684095的博客
08-01 435
两个子元素会自动分布在容器的左右两侧，无需使用。这些属性在 Flex 容器的子元素上不会生效。“Flex 容器的子元素不会响应。，也不会成为浮动元素。Flex 布局是一个。
超简单的跳动爱心
Liberal_w的博客
07-31 528
本文展示了CSS和Canvas两种实现跳动心形效果的方法
CSS和XPATH选择器对比
dongxiao_highgo的博客
07-31 344
【代码】CSS和XPATH选择器对比。
css中常用的几种定位方式
03-29
</think>CSS中常用的定位方式主要通过`position`属性实现，主要包括以下5种。每种方式的特点和使用场景如下： --- ### 1. **静态定位（Static）** - **特点**： 默认定位方式，元素按正常文档流排列，忽略`top`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈阳羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值