文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

实操CSS定位：绝对定位、相对定位和固定定位

在CSS中，定位是一个复杂但重要的概念。它允许我们控制元素在页面上的位置。本文将详细介绍CSS中的三种主要定位类型：绝对定位、相对定位和固定定位。...相对定位（Relative Positioning）相对定位元素的定位是相对于其在正常流中的原始位置。...css复制div { position: relative; top: 10px;}绝对定位（Absolute Positioning）绝对定位元素的定位是相对于最近的已定位祖先元素（而不是相对于视口...如果没有已定位的祖先元素，那么它将相对于初始包含块。元素的原始位置将不再保留。...css复制div { position: absolute; top: 50px; left: 50px;}固定定位（Fixed Positioning）固定定位元素的定位是相对于视口，这意味着即使页面滚动

1.8K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    ：CSS 相对定位和绝对定位有什么区别？

    今天，猫头虎为你整理了「CSS 定位」的高频考点，希望能成为你上岸的秘密武器！✨ 面试全景图 猫头虎整理了关于 CSS 定位的高频考点与延伸内容： [基础问题]：什么是相对定位？...1.2 绝对定位 (position: absolute;) 概念： 绝对定位是相对于最近的已定位祖先元素进行定位，如果没有找到，则相对于根元素（ 或 ）定位。...如果灰色容器没有 position: relative;，粉色块会相对于整个页面定位。 2. 进阶问题：两者的主要区别 问题 2：相对定位和绝对定位的区别是什么？...开放性问题与优化思路 问题 4：如何用绝对定位实现一个响应式弹窗？ 答题思路： 核心解决方案： 使用 absolute 和媒体查询调整位置。 补充背景： 考虑屏幕尺寸变化及兼容性问题。...我是猫头虎博主，期待与您的交流！ 联系我与版权声明 联系方式： 公众号: 猫头虎技术团队 版权声明： 本文为原创文章，版权归作者所有。未经许可，禁止转载。

    59410

    【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )

    一、子元素绝对定位 父元素相对定位 ---- 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置..., 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性...; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 二、代码示例 ---- 父元素使用相对定位 , 子元素使用绝对定位 ; 两个子元素分别放置在 左侧和右侧...DOCTYPE html> 绝对定位示例 /* 父元素设置相对布局

    3.4K20

    【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

    一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位..., 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码 标准流 父容器 中 包含一个...head> 展示效果 : 三、子元素设置绝对定位与父容器是否有定位的效果对比...; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 1、父容器没有定位的情况下为子容器添加定位 下面这种情况就是 父容器没有定位 , 子元素 相对于浏览器进行定位 ; 完整代码示例 :..., 子容器相对于浏览器进行定位 ; 2、父容器有定位的情况下为子容器添加定位 在上面代码的基础上 , 为父容器添加 relative 相对定位 , 不设置边偏移 , 也就是位置相对于标准流的原始位置偏移

    1.9K20

    【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )

    ; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ; 相对定位 是 不脱标 的..., 原来的位置还会进行保留 ; 二、相对定位不脱标示例 ---- 相对定位 , 会保留盒子的原始位置 , 如果有其它标准流盒子在后面 , 会在 相对定位 的 盒子原始位置的 基础上进行排列 ; 代码示例...400px; height: 400px; background-color: pink; /* 设置 100 像素外边距 */ margin: 100px; /* 为父容器添加相对定位...father"> 执行结果 : 蓝色的盒子是 相对定位...的元素 , 红色盒子是标准流元素 , 标准流元素会在 相对定位元素原坐标的基础上进行排列 ; 三、绝对定位脱标示例 ---- 绝对定位 会 脱离标准流 , 后续的标准流元素会忽略掉绝对定位的元素 ,

    1.8K20

    CSS 定位布局 - 相对、绝对、固定三种定位

    在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...那么为什么绿色的div是与body进行偏移呢？因为绿色div的父级元素外层div没有设置定位。 如果我给外层div设置一下绝对定位，或者相对定位，是不是就可以以外层的div进行偏移呢？...先给外层div设置相对定位来看看： ? 好了，从浏览器的呈现来看，设置相对定位就可以让绿色div以外层div进行相对偏移。下面再来看看绝对定位。 ?...父元素div设置了绝对定位之后，的确绿色div就以外层div进行偏移了。但是同时父级div也与body进行了定位，需要重新设置偏移量才可以居中。 ?...上面已经测试使用了绝对定位，绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。 那么这个怎么去验证呢？

    4.6K40

    可视化格式模型-相对定位

    一旦一个框按照常规流或者是浮动得到定位，它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响： B2在定位时，就好象B1没有发生偏移一样。...也就是说，B2只认没有偏移之前的B1，B1的偏移不对B2产生任何影响，相对定位的元素，是处于常规流中的，这点需要注意，另外，相对定位是相对于元素的自身定位，并且，在常规流中还占据原来的位置。...这也意味着相对定位可能产生框的重叠。 相对定位元素的尺寸 相对定位元素的尺寸，会保持它在常规流中的尺寸。包括换行以及原来为它保留的位置。...在包含块的章节中，说明了什么时候相对定位元素会产生新的包含块。 如何偏移以及计算后的值 对于一个相对定位的元素，’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’...top 和 bottom 属性将相对定位元素向上或者向下移动，而不改变其大小。top 把框向下移动，而 bottom 将其向上移动。

    93880

    微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative，绝对定位absolute 相对定位：元素是相对自身进行定位，参照物是自己. 绝对定位：元素是相对离它最近的一个父级元素进行定位....相对定位：relative position:relative; /*相对定位*/ left:50rpx; /*相对于自己往右偏离50*/ top:50rpx; /*相对于自己往下偏离...50*/ 绝对定位：absolute position: absolute; left: 50rpx; top: 50rpx; 效果: ?...Attendance-early.png' style="display: {{none}};"> {{zao}} position【定位属性...：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】 相对路径和绝对路径 绝对路径: 以“/”开头代表根目录 相对路径:

    2.2K20

    小程序布局中相对定位的用法

    就是利用到了CSS相对定位的原理搭建组件我们用布局容器先搭建好布局，先添加一个父容器，里边添加三个子容器图片我们第一个子容器设置宽为100%，高为224px，并设置一下背景图图片图片那我们的背景图要做多大呢...然后我们在电脑上做图的时候就做成750px的，因为宽度是等比放大了两倍，高度也要等比放大两倍，高度要做成448为了在小程序中能显示背景图，我们通常会把素材放到素材管理中图片然后给每一个组件都设置一定的边框图片相对定位在我们目前的布局中...而相对定位的意思，是本身自己的位置还保留，我们可以把组件挪到其他位置，通过top、left、bottom、right四个属性来挪动位置。...我们分别设置一下这四个位置的效果，先设置top为30图片然后是left:30图片然后是right:30图片我现在要让我的第二个组件往上移，那自然是要设置bottom属性，我们设置一下给一个36PX的距离图片可以看到，我通过定位设置了距底部...36PX后，组件往上挪了一点，但是下边的组件并没有跟着挪上来，这就是相对定位，自身的空间还保留，但是可以通过属性来进行移动总结在布局中有两个难点，一个是采用什么布局，另一个就是设置定位，把这两个知识点掌握并能灵活运用就可以制作出需要的页面效果来

    85620

    微信小程序-元素的定位相对绝对固定

    ，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。...语法 position: relative; //相对定位 position: absolute; //绝对定位 position: fixed; //固定定位 // 然后上下左右来定位其距离 left...: 1px； right : 1px; top : 1px; bottom : 1px; relative 相对相对，就是相对于自己本身在流中的位置的偏移，元素框偏移某个距离。...absolute 绝对绝对，就是位置是觉得，其他元素变化了，他也不动, 但是有个前提就是相对于父元素 —— 前提是父元素的位置是确定的元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块

    4.3K31

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ; 这里与相对定位进行对比...布局中的位置 , 漂浮在任何元素上方 ; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位...与 滚动条滚动没有任何关系 ; 固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的...> 显示效果 : 12、z-index 属性值简介 使用 z-index 属性 , 可以设置 堆叠层级 , 数值越大 , 越靠上 ; z-index 属性取值范围 : 负整数..., 可以解决 外边距 塌陷问题 ; 15、元素显示与隐藏 控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 16、display 隐藏对象 为标签元素设置

    4K10

    利润表怎么读？利润表如何与经营分析结合？

    第二步：历史分析——同比、环比、趋势，看到底单看一期利润表意义有限，趋势比单点更重要。分析利润表时，关键在于把各项数据与预算比、与去年同期比，而且一定要用率而不是只用额。为什么用率比用额更有效？...动态分析需要把利润表放在行业背景下看：如果行业都在下滑，我们下滑低于行业，是可以接受的；如果我们在增长，但行业主要企业增长更快，就需要认真检视。三、利润表如何与经营分析结合？...FineBI在利润表与经营分析结合中的价值，主要体现在两个层面：在利润表阅读环节，将利润表数据接入统一看板，自动计算毛利率、费用率、净利率等核心指标，并支持按季度、按年度趋势追踪。...在与经营分析结合环节，支持按产品线、区域、客户群等维度拆解收入和毛利数据，让管理层不再只看公司平均，而是能看到哪个产品线在拖后腿、哪个区域是利润贡献主力。...同时，将利润表数据与预算目标、去年同期数据放在同一看板中对比，让经营分析会从翻报表找数变成看数据说问题。

    12510

    【多机器人定位】开源 | 自主式多机器人系统，配备全舰载距离相对定位系统，有效实现定位！

    autonomous swarm of micro flying robots with range-based relative localization 原文作者：Shushuai Li 内容提要 精确的相对定位是机器人群的一个重要要求...本文介绍了一种自主式多机器人系统，该系统配备了全舰载距离相对定位系统。...它使用板载感知速度、偏航率和高度作为输入，然后通过将这些量与板载超宽带(UWB)天线获得的测距测量结果融合，估计其他机器人在其自身框架中的相对位置。仿真结果表明，该方法具有较高的精度、效率和稳定性。...结果表明了所提出的相对定位方法在多机器人系统中的有效性。 主要框架及实验结果 ? ? ? 声明：文章来自于网络，仅用于学习分享，版权归原作者所有，侵权请联系删除。

    70610

    XPath元素定位常用的5种方法（相对路径）

    一、XPath定位 定位 说明 //ul/* ul的所有子元素 //input[2] 第2个input元素 //input[last() 最后一个input元素 input[position()< 3]...当前元素节点标签之前的所有兄弟节点（同级） * following：当前元素节点标签之后的所有节点 * following-sibling：当前元素节点标签之后的所有兄弟节点（同级） * 使用语法：轴名称::节点名称前后的定位与之前一致...二、XPath定位验证 1、验证XPath定位元素是否正确，可以在Google Chrome的elements或console中进行验证 在需要定位的页面，按F12后，切换至elements列下，按下Ctrl...+f键，输入XPath表达式 在需要定位的页面，按F12后，切换至console列下，输入表达式。...语法是：$x("your_xpath_selector") 2、表达式正确，元素定位正确时，会查找出该元素，如下图： 3、未定位准确，找不到该元素，查找结果为空，如图： 4、表达式不正确，无法正常识别情况

    14.8K31

    【约束布局】ConstraintLayout 13 种相对定位属性组合 ( 属性组合 | 用法说明 )

    文章目录 相对定位简介 相对定位属性组合前提条件 相对定位 Left Right 四种组合属性 相对定位 Start End 四种组合属性 相对定位 Top Bottom 四种组合属性 相对定位控件约束细节...( 被约束的边的具体位置 ) 相对定位简介 相对定位 : 1.地位 : 相对定位 是 约束布局中 的 一种 创建布局的 最基础 的 组成部分 ; 2.作用 : 约束布局允许你去放置一个组件 , 并且与其它组件相关联...: 相对定位一共有 13 种 属性 , 分别是 : ① Left , Right 不同排列 组合成的 四种 属性 ; ② Start , End 不同排列 组合成的 四种 属性 ; ③ Top...相对定位 属性 组合 前提 : 以 水平方向的 Left , Right 为例 ; 1.组合方式 : Left , Right 可以构成 四种 相位定位属性组合 ; 2.两个约束关系组件 : ① 被约束组件...; 3.约束示例 : 使用 layout_constraintLeft_toLeftOf 属性添加了约束 , 被约束组件左侧边 与 目标组件左侧边 的方位关系 , 前者是在后者的 左边 , 右边 ,

    1.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券