Css规范整理:3.4、常规流布局:相对定位

简介: 当一个盒根据<u>常规流</u>或者<u>浮动</u>摆放好后,它可能会相对于该位置移动,称之为相对定位。 对其他盒的影响:用这种方式偏移盒(B1)的位置不影响盒(B2),遵循:给定B2位置时就当B1没有偏移,并且B2在B1应用偏移之后没有重新定位(re-positioned)。

相对定位

(postion:relative)

当一个盒根据<u>常规流</u>或者<u>浮动</u>摆放好后,它可能会相对于该位置移动,称之为相对定位。

对其他盒的影响:用这种方式偏移盒(B1)的位置不影响盒(B2),遵循:给定B2位置时就当B1没有偏移,并且B2在B1应用偏移之后没有重新定位(re-positioned)。这表明相对定位可能会导致盒重叠。(z-index确定重叠的显示)

对包含块的影响:然而,如果相对定位导致具有'overflow:auto'或'overflow:scroll'的盒溢出了的话,UA必须让用户能够访问这部分内容(在其偏移位置),此时,滚动条的创建可能会影响布局。

内部影响:相对定位的盒保持它在常规流中的大小,包括换行和空格都会原样保留。

具体设置

对于相对定位的元素,'left'和'right'水平移动盒,不会改变其大小。'left'把盒向右移,而'right'把盒向左移动。因为盒没有被分割或者拉伸,所以'left'或'right'的应用值总是(满足):left = -right

如果'left'和'right'都是'auto'(各自的初始值),应用值为'0'(即盒待在原位置)

如果'left'是'auto',其应用值为负的'right'值(即盒向左移动'right'值)

如果'right'被指定为'auto',其应用值为负的'left'值

如果'left'和'right'都不是'auto',位置就被过度约束(over-constrained)了,它们('left'和'right')其中有一个会被忽略。如果包含块的'direction'属性是'ltr',那么'left'有效,'right'变成-'left'(负的'left')。如果包含块的'direction'属性是'rtl',那么'right'有效,'left'被忽略

示例 下列3条规则是等价的:


div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

'top'和'bottom'属性会上下移动相对定位的元素,不会改变其大小。'top'把盒向下移,'bottom'向上移。因为盒没有被分割或者拉伸,所以'top'或'bottom'的应用值总是(满足):top = -bottom。如果都是'auto',它们的应用值就都是'0'。如果其中一个是'auto',它会变成另一个的相反数。如果都不是'auto',就忽略'bottom'(即'bottom'的应用值将是负的'top'值)

注意 脚本环境中,相对定位盒的动态移动能产生动画效果(另见<u>'visibility'</u>属性)。尽管相对定位可以用作上标和下标的形式,但行高不会因为其定位而自动调整。更多信息请查看<u>[行高的计算]</u>中的说明

原文发布时间为:2018年02月10日
原文作者: 雕刻零碎 

本文来源:开源中国 如需转载请联系原作者

目录
相关文章
|
12天前
|
前端开发
css 十字分割线(含四等分布局)
css 十字分割线(含四等分布局)
16 2
|
11天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
16 0
CSS 【实战】 “四合院”布局
|
14天前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
16 1
|
14天前
|
前端开发 算法 容器
css【详解】grid布局—— 网格布局(栅格布局)(一)
css【详解】grid布局—— 网格布局(栅格布局)(一)
19 1
|
4天前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
|
8天前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
14 0
|
8天前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
9 0
|
11天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
6 0
|
11天前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
15 0
|
14天前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
12 0