相对定位(Relative positioning)

cyixlq 发布于2019-08-29 12:32 / 3408人阅读

摘要：当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，这叫相对定位。

当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，这叫相对定位。

相对定位的盒保持它在常规流中的大小，包括换行和空格都会原样保留

relative与absolute,fixed

relative与absolute的关系

在例1中,absolute元素的top/left:0的定位在浏览器窗口的左上角,而设置了relative父元素的absolute元素的top/left:0在relative元素的左上角
在例2中,relative元素与absolute元素同级的时候,z-index:2,后面的覆盖前面的元素.当relative元素与absolute元素嵌套时,relative元素的z-index决定层叠顺序,absolute元素z-index失效
在例3中,普通div元素设置的overflow:hidden对于子元素是absolute的元素无效,而设置relative的div元素设置overflow:hidden可以在子元素absolute中生效

也就是说relative可以:

限制left/top/right/bottom定位

限制z-index层级

限制在overflow下失效的问题

而对于fixed,relative只能限制z-index层级

relative与定位

relative与自身的定位

在例1中,设置left/top:0后,relative元素不会发生任何变化,而设置了left/top:100px后,元素相对于它本身向右和向下分别偏移了100px

在例2中,第二个图片position: relative;left: -999em;,虽然它看不见了,但是它的位置保留了下来

在例3中,一个relative元素同时设置top/bottom:100px或者left/right:100px,起作用的是left:100px,top:100px

relative与z-index

relative与z-index关系

在例1中,设置了relative的元素层级要比普通元素高
在例2中,relative元素与absolute元素同级的时候,z-index:2,后面的覆盖前面的元素.当relative元素与absolute元素嵌套时,relative元素的z-index决定层叠顺序,absolute元素z-index失效
在例3中,z-index:auto比z-index:1优先级小,至于子元素的重叠,需要计算子元素的z-order决定

relative最小化影响原则

在可以多带带使用absolute解决问题的时候,不要使用relative,如有偏差,可以配合margin使用

一定要使用relative的时候,要保证作用范围最小化

relative相关参考
CSS 相对/绝对(relative/absolute)定位系列（四）

云服务器 GPU云服务器 position定位相对定位-绝对定位相对定位相对定位自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111964.html

CSS详细解读定位

摘要：有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。我的回答是相对自己文档流中的原始位置定位。这里就不解释脱离文档流的问题，主要研究它的定位问题。一前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。二正文 1.文档流布局的概念将窗体自上而下分成一行行，并在每行中按从左至右的...

1treeS 2019-08-30 14:01 评论0 收藏0
前端技术之_CSS详解第六天--完结

前端技术之_CSS详解第六天--完结一、复习第五天的知识 a标签的伪类4个：　　a:link 没有被点击过的链接　　a:visited 访问过的链接　　a:hover 悬停　　a:active 按下鼠标不松手顺序就是“love hate”准则。可以简写： 1 a{ 3 } 4 a:hover{ 6 } background系列属性，CSS2.1层面 ...

番茄西红柿 2019-04-23 13:44 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0
带你走进CSS定位详解

摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。一：定位定位属性列表 position top...

googollee 2019-04-23 13:29 评论0 收藏0
探究position定位中absolute和relative的异同

摘要：总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位即定位的，那么就相对于它进行定位。当父元素链上所有父元素都是默认定位，那么定位就是相对于元素的，效果和定位差不多。相信学过CSS的同学都曾经对于position的各种属性很困惑，尤其是absolute和relative定位，简直就是傻傻分不清，笔者写这篇文章就是希望通过代码实验的方...

NickZhou 2019-08-29 13:57 评论0 收藏0