首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

90220

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

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

3.4K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    绝对定位下的盒模型

    元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。...+ ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth; 但是在含有绝对定位元素的包含块内,包含块的尺寸却不能由上述公式计算...但是对于绝对定位元素,left,right,top属性设置为auto时,会发生比较有趣的现象。当left:auto时,元素的左边将和元素的静态位置的左侧对其。...原理就是根据上述公式,将对应方向的margin设为auto,这样浏览器就会计算出合适左右(上下)边距,居中对齐。 但是IE6,7,8(Q)不支持绝对定位元素的这种垂直居中方式。...此时,浏览器会舍弃某个属性值。 对于从左向右书写的语言,会舍弃right的值,并重新赋值right:30px。

    83340

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

    就是利用到了CSS相对定位的原理搭建组件我们用布局容器先搭建好布局,先添加一个父容器,里边添加三个子容器图片我们第一个子容器设置宽为100%,高为224px,并设置一下背景图图片图片那我们的背景图要做多大呢...一般我们的手机宽我们约定为375px,然后我们在电脑上做图的时候就做成750px的,因为宽度是等比放大了两倍,高度也要等比放大两倍,高度要做成448为了在小程序中能显示背景图,我们通常会把素材放到素材管理中图片然后给每一个组件都设置一定的边框图片相对定位在我们目前的布局中...,普通容器默认是块级布局的效果,块级布局宽度会充满整行,所以是从上到下排列。...而相对定位的意思,是本身自己的位置还保留,我们可以把组件挪到其他位置,通过top、left、bottom、right四个属性来挪动位置。...,我通过定位设置了距底部36PX后,组件往上挪了一点,但是下边的组件并没有跟着挪上来,这就是相对定位,自身的空间还保留,但是可以通过属性来进行移动总结在布局中有两个难点,一个是采用什么布局,另一个就是设置定位

    25920

    css绝对定位的参照物是什么_css 清除上定位

    大家好,又见面了,我是你们的朋友全栈君。...css绝对定位的重新认知 所谓的css绝对定位,就是 position:absolute; 这里记录一个我的错误认知,就是 绝对定位的参照物是 内容,还是 内容+内边距,我一直以为 参照物就是内容,但是实际上参照物是... css绝对定位的重新认知...但是如果给 box添加了 padding,那么绝对定位是怎样的,在 .box类中添加 padding: 50px;,来看看效果 可能你会疑惑,那边框呢,可以试试,在 .box类中添加边框 border...: 50px solid hotpink; 来看看效果 可以看见并没有包含边框,因此 css绝对定位的参照物就是 内容+内边距 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    68460

    绝对定位bottom值为0的位置问题

    有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应该被定位到哪个位置?...就像下面的代码,这个div依然被定位在了屏幕的底部,和fixed值“一样”的表现。只不过这个“一样”是暂时的,拖动滚动条就露底了,div滚动了上去,死死的定位在了第一屏底部的位置。 绝对定位bottom值为0的位置问题-caihong.cc *{...应该不少同学都知道这个表现,我问过几个朋友,他们也知道绝对定位的元素bottom为0的时候会定位到屏幕底部。但是细问原理的时候都没能讲出来。 为什么他没有定位到文档的最底部?...传送门 这一条刚入门的时候就知道,绝对定位的元素相对于他的包含块位移。现在的问题是div的包含块是谁,于是我继续去扒包含块。

    2.2K60

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

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。...绝对定位的使用:     ​   绝对定位的时候,该元素的父元素一定要记得设为相对定位,这样在不同分辨率下定位才不会错乱,但是前提是这个父元素在一个安全的宽度里面,如果这个父元素本身是一个会因为分辨率降低而改变的元素...而是在放大图背景的div里继续放一个安全宽度div,再把它作为父元素做相对定位,给里面的子元素做绝对定位,这样就不会出现不同分辨率下绝对定位错乱的问题了。...还有一个小问题,在页面加载慢的时候重新刷新页面会先显示放大的效果,再变为缩小后的效果,会闪一下,这个还没找到解决办法,希望懂的朋友们多多交流。...scale,则该缩小相当于当前页面下缩小的效果了,两边自然会留白。

    3.6K70

    干货 | 一分钟了解PyQt的绝对定位

    布局管理是GUI编程中的重要部分。布局管理是一种如何在应用窗口上放置组件的方法。 我们可以通过两种基本方式来管理布局。 绝对定位和布局类。...今天我们首先来谈谈的是PyQt编程中的绝对定位,绝对定位就是每个控件按程序员自己指定的位置进行放置。 简单明了就是"不要你觉得,要我觉得"。...可能听到这里你一脸懵逼,不知道为什么,下面本文就来为你解释。...当你使用绝对定位,我们首先要了解以下窗口限制: 1.如果我们调整了窗口的大小,窗口里面控件的大小和位置保持不变,不会随着窗口的改变而改变。 2.在不同平台上,应用程序看起来可能会不同。...3.更改字体可能会破坏应用程序的布局。 4.如果决定改变布局,我们必须将每个控件彻底的加以修改,这个过程是很繁琐和耗时的。

    1.1K20

    Docker容器实战(三) - Docker的自我重新定位

    Docker公司为什么在Docker项目已经取得巨大成功之后,执意走回已经让无数先驱折戟的PaaS路呢? 实际上,Docker项目一直伴随着公司管理层和股东们的阵阵担忧。...而谈到Docker项目的定位问题,就不得不说说Docker公司的老朋友和老对手 CoreOS 定位 一个基础设施领域创业公司 核心产品 定制化的操作系统,用户可以按照分布式集群的方式,管理所有安装了这个操作系统的节点...公司对Docker项目定位的不满足 Docker公司解决这种不满足的方法就是,让Docker项目提供更多的平台层能力,即向PaaS项目进化 而这,显然与CoreOS公司的核心产品和战略发生了严重冲突!!...也就是说,Docker公司在2014年就已经定好了平台化的发展方向,并且绝对不会跟CoreOS在平台层面开展任何合作 这样看来,Docker公司在2014年12月的DockerCon上发布Swarm的举动...接下来,你只需要执行一条非常简单的指令 fig up Fig就会把这些容器的定义和配置交给Docker API按照访问逻辑依次创建,你的一系列容器就都启动了;而容器A与B之间的关联关系,也会交给Docker

    66760

    绝对定位的层判断是否有相互覆盖的解决算法

    这个算法我在上篇博文《jQuery 模拟 ubuntu 3D desktop 的 Dodge Effect 效果》中有提到过。   ...但那时想法过于简单,当时的解决思路是只要层的一个角的坐标处于另一个层的所在区域,则窗口就会有覆盖。这一点没有错,但还有一些特殊情况。...| |___________| |___________| // |___________| |_____| |_____|   下面的代码需要配合上篇文章的代码看...,我只提供核心的判断代码了 // 常规情况,只要有一个角处于区域内,则可以判断窗口有覆盖 // _______ _______ _______ _____...&& thisStartX baseEndX) ){ flag = true; }   至于还有两种情况,就是两个角处于区域内和四个角都在低层的区域内

    85060

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

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

    9.7K30

    Extended VINS-Mono: 大规模户外环境进行绝对和相对车辆定位的系统性方法(IROS2021)

    此外,在我们的系统方法中,绝对定位表示具有固定原点的定位方法,而相对定位表示具有(潜在的)动态原点的定位方法。因此,我们的系统方法旨在获得和更新绝对/相对定位方法的多个坐标系之间的动态转换关系。...因此,"全局误差 "和 "对GT的偏移量(CDF)"的绝对值反映了多种相关定位方法的总体精度水平。然而,我们更关注的是绝对定位方法和相对定位方法之间的相对关系。...我们的目标是证明相对定位方法的预测全局状态估计值应该比绝对定位方法的全局状态估计值具有类似或更高的总体精度水平。...这个实验表明,我们的融合方法将绝对定位方法的全局精度传播给了相对定位方法,并在相对定位的约束下提高了该投影全局状态的精度。...然而,在离开隧道后,扩展的VINS-Mono和相关的基于KF的INS的整体精度明显下降。在隧道内和前城市段的某些部分没有绝对的定位方法,相对定位方法的累积误差降低了它们的整体精度。

    77211

    容器挂载volume出现“Permission denied”的问题定位解决

    使用如下系统(centos)运行容器后,在容器内的挂载目录内执行ls命令出现了“Permission denied”的错误 Linux localhost.localdomain 3.10.0-862...挂载到容器容器的/home目录 docker run -v /home/centosDir/:/home -it -d --name=centos 49f7960eb7e4 /bin/bash 出现“Permission...MAC为在DAC之上的访问控制,即如果访问权限没有通过DAC检查,则直接访问失败;否则继续MAC访问权限检查 查看原始容器内挂载的目录/home的MAC如下,/home的type与容器不匹配,导致MAC...drwx------. charlie charlie unconfined_u:object_r:user_home_dir_t:s0 charlie 使用docker inspect centos查看容器的文件策略...,如下,可以看到容器需要的挂载类型为svirt_sandbox_file_t,进程运行域为svirt_lxc_net_t,因此解决方法为将挂载文件修改为与容器需要的类型一样即可 "MountLabel"

    2.4K20

    关于IE6下绝对定位元素莫名消失的问题

    这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。...在蓝色理想发现了这样的几条解释: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致; 2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,...IE6/7不显示绝对定位层,FF显示; 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示; 4.当绝对定位层的邻近浮动层的宽度等于父层宽度时...,有清除浮动时,IE6/7不显示绝对定位层,FF显示; 就目前来说我个人的解决办法有两条,第一取消浮动,第二让绝对定位的元素不要挨着浮动的标签。...蓝色上那位哥们提出了另一个办法,就是在绝对定位的层跟浮动层中间插个空的标签。

    654100

    推荐 - 综述 | 多机器人网络的分布式相对定位算法

    GNSS已被广泛用于定位,并且可以给出机器人的绝对位置。RTK(实时运动学)技术可以帮助GNSS定位达到厘米级精度。这为自动驾驶和自主导航提供了很大的帮助。...相对定位是利用机器人之间的测量来定位网络中机器人的另一种方法,无需来自外部的信息。相对定位算法可分为集中式和分布式(或分散式)。 在集中式系统中,所有机器人都将其数据报告给中央服务器。...起初,在没有全局定位信息可用的情况下,机器人的分布式相对定位依赖于相对观察。对机器人的观察可以分为两类:(1)机器人之间的观察和(2)对环境特征的观察。...每个节点计算其与邻居的相对位置,机器人需要同步其估计值,以便在网络中生成一致的相对定位结果。这种进步通常涉及状态传播和状态迭代。 由于上述原因,分布式相对定位系统与集中式网络定位相比具有许多新的挑战。...主要贡献如下: · 本文总结了分布式多机器人网络相对定位方法,并根据其设计方法和测量类型对各种方法进行了分类。详细介绍了每种类型的分布式相对定位算法。分析比较了每种分布式相对定位算法的优点和局限性。

    43440
    领券