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

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

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

1.8K10

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

猫头虎碎碎念： CSS 定位是网页布局的核心能力，无论是简单的按钮微调，还是复杂的弹窗定位，都离不开相对定位和绝对定位的熟练应用。...什么是绝对定位？ [进阶问题]：两者的主要区别和适用场景？ [实战问题]：如何用它们解决实际开发需求？ 1. 基础概念必会：定义+场景 问题 1：什么是相对定位和绝对定位？...面试官问法： 简单描述一下相对定位和绝对定位的工作原理？ 它们分别适用于哪些场景？...实战问题：开发中的应用技巧 问题 3：如何结合相对定位和绝对定位实现复杂布局？ 场景： 假设需要在一个固定宽高的容器中，精确定位一个悬浮按钮。...开放性问题与优化思路 问题 4：如何用绝对定位实现一个响应式弹窗？ 答题思路： 核心解决方案： 使用 absolute 和媒体查询调整位置。 补充背景： 考虑屏幕尺寸变化及兼容性问题。

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

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

    一、绝对定位特点 ---- 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器...; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ; 相对定位 是 不脱标 的..., 原来的位置还会进行保留 ; 二、相对定位不脱标示例 ---- 相对定位 , 会保留盒子的原始位置 , 如果有其它标准流盒子在后面 , 会在 相对定位 的 盒子原始位置的 基础上进行排列 ; 代码示例...蓝色的盒子是 相对定位 的元素 , 红色盒子是标准流元素 , 标准流元素会在 相对定位元素原坐标的基础上进行排列 ; 三、绝对定位脱标示例 ---- 绝对定位 会 脱离标准流 , 后续的标准流元素会忽略掉绝对定位的元素...下面的 蓝色盒子 是绝对定位元素 , 该元素脱离标准流 , 下方的红色盒子是标准流元素 , 直接放置在父盒子左上角 ;

    1.8K20

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

    微信小程序 - 相对定位和绝对定位 相对定位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】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )

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

    3.4K20

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

    关于定位 我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。...而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移，那么就是根据绿色div的文档流布局的位置进行相对偏移的。 ? 假设想要达到上图的偏移效果，该怎么做呢？ ?...从代码看出，只要在绿色div的样式属性设置了position:relative;之后，就可以使用left和 top 设置与原来文档布局位置的偏移量。 实现代码如下： 使用了绝对定位，绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。 那么这个怎么去验证呢？...定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。 理解练习 制作如下布局： ? 首先写两个div出来，如下 ? 将数字5的div定位到第一个div的右上角 ?

    4.6K40

    CSS 定位布局 - 绝对、固定定位设置居中悬浮div

    仅供学习，转载请注明出处 讨论的问题 在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中，发现当使用定位布局的时候，存在一个无法使用margin居中的方法。...下面设置一下相对定位，看看会不会影响这种居中效果 ? 从上图可以看出相对定位并不会影响margin居中布局。 设置一下绝对定位，看看会不会影响这种居中效果 ?...使用margin-left 向左偏移div自身宽度的一半，保证居中 使用绝对定位只是无法使用margin-left:auto而已，如果输入具体数值还是可以使用的。 下面来看看，这样写： ? ?...好了，从上面来看，绝对定位已经可以设置div居中了，那么固定定位是否也是如此呢？ 固定定位设置div居中 ? ?...固定定位从上图来看，也是可以通过这种方式来进行居中的，基本方法如下： left: 50% margin-left: 负自身宽度的一半 因为绝对定位和固定定位相对于文档流就是悬浮的，这种效果最适合用于制作页眉部分的固定栏目了

    4.9K20

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

    , 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位...要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定...与 滚动条滚动没有任何关系 ; 固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的...使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置 ; 绝对定位 和 固定定位 都可以到达 将 元素转为 行内块显示模式 的效果 ; 行内盒子..., 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ; 浮动元素 和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷

    4K10

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

    一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中..., 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码 标准流 父容器 中 包含一个...class="father"> div class="son">div> div> 展示效果 : 三、子元素设置绝对定位与父容器是否有定位的效果对比...---- 在上面代码的基础上 , 为 子元素 添加绝对定位 数据 , 分别设置 顶部 和 左侧 50 像素的偏移量 ; /* 绝对定位 */ position: absolute; /

    1.9K20

    CSS-绝对、相对、固定定位三者区别

    class="box1">div> div class="box2">div> 绝对定位 该元素脱离文档流，不参与布局一个个排列。...写了绝对定位就要写上 left 和 top。 这两者默认是距离文档左上角的距离。...相对定位 刚才已经介绍了绝对定位可以通过 left 和 top 来控制距离文档左上角的距离，也就是说 left 和 top 是相对于 "文档" 进行定位的。...里面，并且给 box2 设置相对定位 position: relative 那么 box1 的 left 和 top 就会相对于 box2 的左上角原点。...固定定位 固定定位和绝对定位很像，可以让元素飘起来，想去哪里去哪里。但是绝对定位是相对于 "某某元素" 进行定位的。而固定定位则是永远是相对于 "浏览器可视区左上角"。

    87110

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

    本文链接：https://blog.csdn.net/weixin_42514606/article/details/100127856 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局...，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。...定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。...语法 position: relative; //相对定位 position: absolute; //绝对定位 position: fixed; //固定定位 // 然后上下左右来定位其距离 left...absolute 绝对绝对，就是位置是觉得，其他元素变化了，他也不动, 但是有个前提就是相对于父元素 —— 前提是父元素的位置是确定的元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块

    4.3K31

    appium使用相对坐标定位元素

    最近在用appium做自动化时发现，有一些元素无法通过uiautomatorviewer进行定位，这样就只能通过相对坐标来进行定位了。但是，问题又来了：如何获取元素的坐标呢？...在网上找了半天也没找到相应的解决方法，后来在一篇文章中看到打开手机指针位置来确定元素所在坐标。...具体方法：设置--开发者选项--指针位置 开启指针位置之后，点击手机屏幕就会显示该位置的具体坐标，这样就获取到了元素的绝对坐标 然后通过webdriver的tap()函数点击该坐标就可以了。...我们获取到的是绝对坐标，如果换一个屏幕分辨率不同的手机那这个坐标自然会发生变化，要实现不同手机均能实现点击同一控件自然要用到相对坐标了，具体方法如下： 1.获取当前空间的绝对坐标（x1,y1)，开启指针位置后...分辨获取当前手机的x、y坐标; 3.获取测试手机的屏幕大小（x3,y3)，获取方式同上一步； 4.获取指定控件在测试手机中的坐标：((x1/x2)*x3,(y1/y2)*y3) 5.获取到坐标之后同样使用

    3.3K30

    【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

    绝对定位 , 此处的 父容器 必须设置 相对定位 ; 上图中 , 父容器存在 1 像素的边框 , 父容器 中设置一个内边距 ; 设置子元素浮动后 , 浮动的元素 可以覆盖到 内边距 范围 ; /*...最外层 父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */..., 浮动可以在标准流上方浮动显示 , 但是不能覆盖到 内边距范围 ; 也不能使用 相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中..., 可以使用绝对定位在父容器的任意位置显示任何元素 ; /* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position...- 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /*

    2.5K10

    css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。...盒子里的div等小盒子可以用百分比来表示，来达到页面自适应。...绝对定位的使用：     ​   绝对定位的时候，该元素的父元素一定要记得设为相对定位，这样在不同分辨率下定位才不会错乱，但是前提是这个父元素在一个安全的宽度里面，如果这个父元素本身是一个会因为分辨率降低而改变的元素...例如：做一个活动页面，其中这个页面背景为一个大图，在这个大图上要放一些小图来与大图实现定位，绝对不能以大图直接作为背景！...而是在放大图背景的div里继续放一个安全宽度div，再把它作为父元素做相对定位，给里面的子元素做绝对定位，这样就不会出现不同分辨率下绝对定位错乱的问题了。

    4.8K70

    MySQL DBA如何利用stracepstackgdb来定位问题

    strace简介 strace是Linux环境下的一款程序调试工具，用来监察一个应用程序所使用的系统调用。 Strace是一个简单的跟踪系统调用执行的工具。...在其最简单的形式中，它可以从开始到结束跟踪二进制的执行，并在进程的生命周期中输出一行具有系统调用名称，每个系统调用的参数和返回值的文本行。...strace观察server端执行 #命令 strace -o /tmp/strace.log -T -tt -f -p `pidof mysqld` #假设你想看跟IO相关的行为，可以用-e trace来指定...detached ...> 可以清楚地看到有对应的SQL输出 pstack简介 pstack用来跟踪进程栈，这个命令在排查进程问题时非常有用，比如我们发现一个服务一直处于work状态（如假死状态，好似死循环），使用这个命令就能轻松定位问题所在...； 可以在一段时间内，多执行几次pstack，若发现代码栈总是停在同一个位置，那个位置就需要重点关注，很可能就是出问题的地方； 正确使用姿势 pstack使用起来非常简单，直接pstack -pid即可

    2.7K40

    常见单目视觉和机械臂绝对定位的方法

    REF：基于单目视觉的 SCARA 机械臂末端绝对定位精度提升方法 通过单目相机来获取机械臂末端位置的信息，是因为单目相机成本低，且SCARA机械臂的末端运动只在XOY 方向上的平面运动，Z 轴是一个固定高度...通过四边形边长的几何关系进行目标物的定位 在相似的几何代数基础上，建立特征点与特征直线的目标函数，使用优化算法实现定位 基于逆投影光线方法的两阶段选代算法，针对特征点的相对位置和姿态估计问题通过迭代逼近的方式求解...机械臂绝对定位精度方法 机械臂绝对定位精度的提升方法主要分离线误差补偿和在线误差补偿，离线误差补偿是在机械臂工作前，根据某些方法提前优化机械臂的控制输入来提升其绝对定位精度，如数学逼近法、运动模型参数标定法...相对于离线补偿技术，在线补偿的绝对定位精度普遍会更高、稳定性更强 2.1 离线误差补偿 采用度量轴线方法与径向排列约束标定方法，得出安装在机械臂末端执行器上的相机中心与世界坐标系的坐标映射关系，从而得到关节轴线方程...，再通过数控系统实现机器人工具中心点的实时补偿 采用空间插值估算出末端执行器在目标位置的定位误差，对其补偿提高机械臂绝对定位精度 在末端执行器上安装激光测距传感器，结合地板划分的网格，构建相对测量框架。

    59510

    如何使用Traceroute定位网络问题？

    Traceroute 是网络诊断中用于追踪数据包从源主机到目标主机的路径的工具，可帮助定位网络延迟、路由故障或中间节点问题。一、基础命令1....traceroute -q 5 google.com-w 等待响应时间（秒） traceroute -w 2 github.com-I 使用...强制使用ICMPtraceroute -I 目标IP # 适合绕过某些UDP限制3....路径终点无法到达现象：最终跳显示* * *可能原因：目标服务器防火墙拦截、路由配置错误解决方案：检查目标端口是否开放（使用telnet或nmap）3....路径环路现象：IP地址重复出现（如跳数3和跳数7的IP相同）可能原因：路由表配置错误解决方案：向网络管理员反馈或更换VPS网络配置五、注意事项权限问题：部分参数（如TCP模式）需要 sudo 或管理员权限防火墙干扰

    2.5K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券