css 中常用position(定位)

最新推荐文章于 2024-08-28 15:34:24 发布
最新推荐文章于 2024-08-28 15:34:24 发布
阅读量80 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45764245/article/details/119909339
版权
position
sticky:首行固定的效果
fixed:固定在页面中的某一个位置
absolute:根据父组件position进行定位<也称绝对定位>
relative:根据元素当前所在位置进行定位<也称相对定位>
z-index根据数值来调整position元素之间层级的关系达到遮罩效果
陈阳羽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【前端基础知识】css position
Dai的博客
02-08 787
【前端基础知识】css position
微信小程序--组件覆盖之position和z-index
热门推荐
一如年少丶的博客
08-25 2万+
在写页面的时候，我们常常会有这样的需求，就是将一个组件置于另一个组件之上。那么，该如何来实现呢？ 其实，非常简单我们只需要在wxss里设置好position和z-index这两个属性就好了 1.父组件，必须将其position属性设置为relative .uploader-img { /* display: block; */ position: absolute; z-ind...
position 属性的常用的5种取值
qq_41306423的博客
06-22 1万+
日期：2020 年 6 月 22 日 position 属性 前言 说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易 废话不多说，正文开始 小序 position 属性的取值有：static | relative | absolute | fixe
position常见的几种属性
weixin_51959098的博客
11-21 7724
1、static：默认值，在没有设置position属性的时候，position默认为static 在文档（页面）中占位置。 2、relative：相对定位。在使用top或者left进行位置移动的时候，参考的位置是自己原先（没有定位时）所在的位置。 在文档（页面）中占位置。 3、absolute：绝对定位。在没有父元素（直接书写在body下面），或者有父元素，但是父元素没有设置position的值，就是没有定位时（static属性称无定位）在进行top或者left等偏移位置时，参考的偏移位置为浏览
css定位、position与float同时使用的情况
sunsineq的专栏
11-25 1033
　　一、css定位 　　　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 　　　　　　1.普通流：未专门指定的元素都在普通流中定位，position:static/relative;和float:none;也在普通流中定位。 　　　　　　2.绝对定位：position:absolute/fixed;元素框脱离普通文档流。　　 　　　　　　3.浮动：float:left/right;元素脱离普通文档流。 　　二、对元素同时使用position和float的情况 　　　　经过实践发现.
css定位属性position:fixed
wangooo的博客
01-02 3374
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
深究CSS定位position的常用技法
01-19
本文针对CSS常用的6个属性进行探究，大家一定会对这篇文章满意的。 1.position:static static属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。 2.position:...
CSS中的Position定位
qq_35841278的博客
04-09 129
Position定位 Position是常用的定位，使用它会让元素脱离文档流，可以使用z-index指定堆叠顺序，不使用默认是最后定位的元素在最前面 static 定位 html元素默认值，无定位，遵循正常的文档流 不能使用top, bottom, left, right改变位置以及定位 fixed 定位 html元素相对于浏览器窗口的固定定位 { position:fixed; top:0px; left:0px; } 该元素固定位置为浏览器窗口的最上和最左 relative
CSS实现模拟position的fixed页面定位效果
09-25
在网页设计中，`position: fixed` 是一种常用的CSS定位方式，它可以将元素固定在视口的某个位置，即使页面滚动，该元素也会保持在屏幕的特定位置。然而，有些老旧的浏览器或特殊环境下可能不支持 `position: fixed`...
CSS中Position四个属性的使用介绍
12-10
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文将详细解析CSS中`position`属性的四个值：`static`、`relative`、`absolute`和`fixed`，以及它们各自的特点和应用场景。 ...
position的属性(sticky属性)
ganlubaba666的博客
03-24 3176
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 1145
写在前面 为了制作更多复杂的布局，我们经常要用到 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，了解到如何正确舒服地使用。 static .static { position: static; } relative .relative1 { position: relative; } .relative2 { position:...
position定位
weixin_43795084的博客
12-02 206
1.static(没有定位，不能偏移，也就是left等不生效) 所有的元素如果不进行定位，默认都为static 2.absloute（绝对定位） 设置为absolute，它需要向上找一个定位的父元素（也就是被设置了除static以外的值）为基准来定位， 如果没有，则就会以浏览器窗口为基准定位。 3.relative(相对定位) 相对的意思就是相对于其正常的位置(也就是为static)的时候，以它为基准，进行偏移 fixed（绝对定位） 以浏览器窗口为基准进行定位 inherit(继承)
CSS中position属性有什么定位？又有什么区别？与float同时使用时有什么影响？
qq_39280289的博客
09-21 263
position属性中的各种定位简记： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。 没有定位，元素出现在普通流中（忽略 top, bottom, left, right z-index 声明）。 inherit...
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 110
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS\JS实现页面背景气泡logo上浮效果
p_s_p的博客
08-24 388
【代码】CSS\JS实现页面背景气泡logo上浮效果。
CSS基础 什么是盒模型
最新发布
呼叫6945的博客
08-28 440
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒（box）一个盒子由四个部分组成：content、padding、border、margin在css中盒模型可以分为假设一个盒子的css如下。
CSS实现水滴效果图
N201871643的博客
08-26 223
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
引号的艺术：用CSS quotes 属性打造个性化引用
2401_85812026的博客
08-25 433
CSS 的quotes属性是一个强大的工具，它允许开发者自定义网页上的引用标记，从而增强网页的视觉效果和用户体验。本文将深入探讨quotes属性的使用方法，包括如何设置不同的引号样式，以及如何结合伪元素和内容生成技术来实现更复杂的引号效果。quotes属性用于指定在元素中使用的引用标记。它可以定义开放引号和闭合引号，以及它们的类型（水平或垂直）。q {/* 定义中文引号和英文引号 */q:before {q:after {
css中position的值
02-14
在CSS中，position属性用于指定元素的定位方式。它有以下几个常用的取值： 1. static（默认值）：元素按照正常的文档流进行布局，不进行特殊的定位。这是position属性的初始值。 2. relative：元素相对于其正常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陈阳羽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值