文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
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 相对定位和绝对定位有什么区别？

    1.1 相对定位 (position: relative;) 概念： 相对定位是相对于元素自身的默认位置，通过 top、left、right 和 bottom 属性调整位置，原始位置仍占据布局空间。...1.2 绝对定位 (position: absolute;) 概念： 绝对定位是相对于最近的已定位祖先元素进行定位，如果没有找到，则相对于根元素（ 或 ）定位。...如果灰色容器没有 position: relative;，粉色块会相对于整个页面定位。 2. 进阶问题：两者的主要区别 问题 2：相对定位和绝对定位的区别是什么？...「如何兼容不同屏幕尺寸？」 答案：可以通过 百分比单位 或 flex 布局进一步优化。 开放性问题与优化思路 问题 4：如何用绝对定位实现一个响应式弹窗？...补充背景： 考虑屏幕尺寸变化及兼容性问题。 扩展思路： 提到团队协作优化方案，如使用 CSS-in-JS。

    59410

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

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

    3.4K20

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

    一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中..., 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码 标准流 父容器 中 包含一个...; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 1、父容器没有定位的情况下为子容器添加定位 下面这种情况就是 父容器没有定位 , 子元素 相对于浏览器进行定位 ; 完整代码示例 :..., 子容器相对于浏览器进行定位 ; 2、父容器有定位的情况下为子容器添加定位 在上面代码的基础上 , 为父容器添加 relative 相对定位 , 不设置边偏移 , 也就是位置相对于标准流的原始位置偏移

    1.9K20

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

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

    1.8K20

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

    absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。...relative 相对定位的示例 relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。 首先使用三个div来看看文档流部署的情况，如下： ?...而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移，那么就是根据绿色div的文档流布局的位置进行相对偏移的。 ? 假设想要达到上图的偏移效果，该怎么做呢？ ?...在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...因为绿色div的父级元素外层div没有设置定位。 如果我给外层div设置一下绝对定位，或者相对定位，是不是就可以以外层的div进行偏移呢？ 先给外层div设置相对定位来看看： ?

    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

    IOS开发之绝对布局和相对布局(屏幕适配)

    之前如果做过Web前端页面的小伙伴们，看到绝对定位和相对定位并不陌生，并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位，和我们的web前端的绝对定位和相对定位有所不同但又有相似之处。...下面会结合两个小demo来学习一下我们IOS开发中UI的绝对定位和相对定位。...而相对定位则不同，相对定位是参考组件周围的元素来确定组件的大小或位置，相对定位即约束和周围组件的距离来布局的，即layoutConstraint....上面说了这么多了，可能说的不太明白，还是那句话，怎么能少的了代码和实例的支持呢，下面会通过屏幕适配的事例来用绝对布局和相对布局同时实现下面的描述效果。  ...相对布局使用起来会比绝对布局要复杂一些，下面先做屏幕适配的例子，图一是在iPhone的4.0寸的效果图， 当我们不做任何处理的时候在3.5寸屏上是显示不出来的如第二张图： ?

    3K60

    appium使用相对坐标定位元素

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

    3.3K30

    JS Screen对象：获取屏幕信息

    screen 对象中的属性下表中列举了 JavaScript screen 对象中常用的属性及其描述：属性说明availTop返回屏幕上方边界的第一个像素点（大多数情况下返回 0）availLeft返回屏幕左边边界的第一个像素点...（大多数情况下返回 0）availHeight返回屏幕的高度（不包括 Windows 任务栏）availWidth返回屏幕的宽度（不包括 Windows 任务栏）colorDepth返回屏幕的颜色深度（...height返回屏幕的完整高度pixelDepth返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24width返回屏幕的完整宽度orientation...screen 对象的 colorDepth 属性来获取用户计算机屏幕的颜色深度，示例代码如下：提示：颜色深度表示屏幕能够产生多少中颜色，例如，颜色深度为 8 的屏幕可以产生 256 种颜色（即 28）...，目前大部分屏幕的颜色深度为 24 或 32，一些较旧的显示器的颜色深度为 8 或 16。

    25710

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

    CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 ) 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 ) 【CSS...设置 静态定位 模式 , 该 盒子模型 就会按照标准流的方式 摆放布局 , 没有任何 边偏移 的效果 ; 在 使用 定位 时 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于..., 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位..., 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ; 相对定位 是 不脱标 ( 脱离标准流 ) 的 , 原来的位置还会进行保留 ; 8、子绝父相 - 子元素绝对定位 父元素相对定位 绝对定位...需要 任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用

    4K10

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

    定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。...语法 position: relative; //相对定位 position: absolute; //绝对定位 position: fixed; //固定定位 // 然后上下左右来定位其距离 left...: 1px； right : 1px; top : 1px; bottom : 1px; relative 相对相对，就是相对于自己本身在流中的位置的偏移，元素框偏移某个距离。...元素扔保持其未定位前的形状，它原来所占的空间扔保留，就是人走了，但是坑还在那。...absolute 绝对绝对，就是位置是觉得，其他元素变化了，他也不动, 但是有个前提就是相对于父元素 —— 前提是父元素的位置是确定的元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块

    4.3K31
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券