可视化格式模型-相对定位

一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响: B2在定位时,就好象B1没有发生偏移一样。 B1偏移后,B2不会重新定位。

也就是说,B2只认没有偏移之前的B1,B1的偏移不对B2产生任何影响,相对定位的元素,是处于常规流中的,这点需要注意,另外,相对定位是相对于元素的自身定位,并且,在常规流中还占据原来的位置。 这也意味着相对定位可能产生框的重叠。

相对定位元素的尺寸 相对定位元素的尺寸,会保持它在常规流中的尺寸。包括换行以及原来为它保留的位置。 在包含块的章节中,说明了什么时候相对定位元素会产生新的包含块。

如何偏移以及计算后的值

对于一个相对定位的元素,’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’left’会将框向右移动,’right’会将框向左移动。由于 ‘left’ 或者 ‘right’ 不会造成框被拆分或者拉伸,所以,计算后的值(computed value)总是:left = -right。

如果 left 和 right 的值都是 ‘auto’ (它们的初始值),计算后的值(computed value)为 0(例如,框区留在其原来的位置)。

如果 left 为 ‘auto’,计算后的值(computed value)为 right 的负值(例如,框区根据 right 值向左移)。

如果 right 被指定为 ‘auto’,其计算后的值(computed value)为 left 值的负值。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

如上述代码中,DIV 元素是相对定位的元素,它的left 值是 ‘100px’, right 没有设置,默认为”auto”,那么,right 特性计算后的值应该是 -left,即’right:-100px’。

如果 left 和 right 都不是 auto,那么定位就显得很牵强,其中一个不得不被舍弃。如果包含块的 direction 属性是 ‘ltr’,那么 left 将获胜,right 值变成 “-left”。如果包含块的 direction 属性是 ‘rtl’,那么 right 获胜,left 值将被忽略。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div style="width:100px; height:100px; overflow:auto; border:1px solid blue;">

<div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

top 和 bottom 属性将相对定位元素向上或者向下移动,而不改变其大小。top 把框向下移动,而 bottom 将其向上移动。由于 top 和 bottom 没有造成框被拆分或者拉伸,计算值总是 top=-bottom,如果两个都是auto,其计算值就都是0,如果其中之一是auto,它就是另一个的负值。如果都不是auto,bottom被忽略。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

986
来自专栏移动开发的那些事儿

自定义实现垂直滚动的TextView

通过控制y参数可实现文字不同的垂直距离,这里的x,y并不代表默认横向坐标为0,纵向坐标为0的坐标,具体详解我觉得这篇博客解释的比较清楚,我们主要关注的是参数y的...

952
来自专栏互联网杂技

超全整理前端开发面试题——CSS篇(2016年)

介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE 盒子模型、W3C 盒子模型; (2)盒模型:内容(content)、填充...

38413
来自专栏柠檬先生

css3基础知识——回顾

1.属性选择器 完全匹配的属性选择器 [id=article]{}     示例:       <style>         input[typ...

2267
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

653
来自专栏Web项目聚集地

50道CSS面试题(附答案)

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+bo...

883
来自专栏互联网杂技

CSS伪元素的妙用--单标签之美

本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类...

33210
来自专栏编程

前端学习自学笔记:day02

今天是第二天的学习内容笔记,我一般无事都会一直更新下去,直到我前端学的差不多了,我到时候才会转学其他语言,如果在学习中有什么发现,我都会分享上来. ? 在此之前...

17110
来自专栏编程

深入CSS,让网页开发少点“坑”

问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

18110
来自专栏猛牛哥的博客

HTMLayout 界面贴图技术

1634

扫码关注云+社区