绝对定位和固定定位的区别

最新推荐文章于 2024-07-24 20:47:06 发布
最新推荐文章于 2024-07-24 20:47:06 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端_css知识点和bug 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_Common_Man/article/details/124695310
版权

相同点：都脱离了标准文档流

不同点：

（1）定位参考的对象不同

绝对定位（absolute）参考的是离自己最近的已经定位的祖先元素，若祖先元素没有被定位，那么则参考浏览器窗口

固定定位（fixed）参考的一直都是浏览器窗口

（2）触发滚动条时，绝对定位会跟着滚动条发生变化，固定定位则不会

风哑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
相对定位，绝对定位和固定定位的区别
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-01 1万+
一、定位： 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位 可选值： static：默认值，元素没有开启定位 relative：开启元素的相对定位 absolute...
相对定位和绝对定位固定定位
weixin_43700362的博客
12-12 338
相对定位 position:relative 1 相对于自己原来的位置进行定位 2 如果只加了相对定位，没有加具体的位置，那么，对这个元素没什么影响 3 配合left，right,top,bottom使用 4 提升层级 z-index 只用在加了定位的元素上 应用： 想把下面的盒子盖住上面盒子的话， 给上面盒子设置 position:relative z-index:-99； 定位 优先级结合使用...
绝对定位和相对定位,固定定位
qq_45723045的博客
10-17 907
相对定位 相对自身位置进行定位 定位后元素没有脱离文档流原来的位置没有被其他元素占据 元素特点没有发生变化 top:移动后的位置距离起始位置上面多远(往下移动) left移动后的位置距离起始位置左边多远(往右移动) right移动后的位置距离起始位置...
CSS 绝对定位和固定定位
weixin_45672377的博客
12-17 316
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位和固定定位</title> <style> body{ height: 1000px; } /*绝对定位 1.在没有父级元素前提下，相对于浏览器定位 2
相对定位、绝对定位、固定定位
WaNgLu:)的博客
09-02 376
定位 什么是定位： 定位指得就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。 通过position属性来设置元素的定位，可选值： - static：默认值，元素没有开启定位 -relative：开启元素的相对定位 -absolute：开启元素的绝对定位 -fixed：开启元素的固定定位（也是绝对定位的一种） 相对定位 当元素的position属性设置为relati...
相对定位、绝对定位和固定定位
狗头苏丹的博客
06-08 366
相对定位就是相对于自己以前在标准流中的位置来移动。 绝对定位就是相对于body来定位。 绝对定位在这里分两种情况： (1)父元素没有或者没设置相对定位，相对于浏览器视口区域进行定位。 (2)父元素设置了相对定位，相对于父元素/祖先元素进行定位。 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
css的相对定位和绝对定位（固定定位）
qq_51476492的博客
06-02 1万+
css的绝对定位和相对定位
〖大前端 - 基础入门三大核心之CSS篇⑯〗- 相对定位、绝对定位 与 固定定位
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-21 2万+
页面布局时常用到定位，用来给元素安排它的位置。定位又分为相对定位、绝对定位和固定定位。
CSS绝对定位和固定定位，一讲就会
weixin_47556601的博客
02-07 507
大家好，今天给大家分享一下CSS绝对定位和固定定位 定位：基于xxxx定位，上下左右的位置变化 1.没有父级元素定位的情况下，相对于浏览器定位 2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移 3.在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不存在标准文档流中，原来的位置不会被保留 先讲绝对定位： 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset
相对、绝对和固定定位的比较
09-25
不管是相对路径、绝对路径，还是相对定位、绝对定位，刚接触的同学可能被这两个词弄的都很混乱。下面简单说一下DIV+CSS里面的相对、绝对以及固定定位。以下语言通俗易懂，个人见解
一列固定宽度布局和背景图片绝对定位
01-19
这张网页，我只是尝试了一下背景图片的绝对定位设置。 一列固定宽度网页用于我的学习笔记，很不错吧。这张网页，我只是尝试了一下背景图片的绝对定位设置。 1.HTML部分只需在<body ></body >之间编写一...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
【CSS】CSS3 新特性
最新发布
小秀的博客
07-24 307
CSS Grid Layout 是一种二维布局系统，允许你在水平和垂直方向上创建复杂的布局。Flexbox 提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。CSS3 动画允许你创建复杂的动画效果，而无需使用 JavaScript。CSS3 增强了媒体查询的能力，允许你根据多种设备特性来应用样式。CSS3 过渡效果允许你平滑地在两个属性值之间进行动画过渡。CSS3 引入了更多的选择器，如属性选择器、伪类选择器等。：允许你根据元素的属性或属性值来选择元素。属性允许在元素上添加阴影效果。
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 474
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1003
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 92
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 950
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1586
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
相对定位、绝对定位、固定的区别
05-12
相对定位、绝对定位和固定定位是CSS中常用的三种定位方式，它们的区别如下： 1. 相对定位：相对定位是相对于元素原本的位置进行调整。使用相对定位时，元素仍然占据其原有的空间，但是可以通过 top、bottom、left、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值