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

一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(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 条评论
登录 后参与评论

相关文章

来自专栏Java爬坑系列

【Java疑难杂症】有return的情况下try catch finally的执行顺序

  有这样一个问题,异常处理大家应该都不陌生,类似如下代码: 1 public class Test { 2 public static void ...

1976
来自专栏java学习

Java基础第三天学习笔记

03.01_Java语言基础(逻辑运算符的基本用法)(掌握) * A:逻辑运算符有哪些 * &,|,^,! * &&,|| * B:案例演示 * 逻辑运算...

2717
来自专栏乐百川的学习频道

Golang学习笔记 函数

函数声明 函数使用func关键字声明,除了类型是后置的以外,剩下的地方基本和其他语言类似。特别地,和变量声明类似,如果函数参数的类型一样,同样可以只在最后添加类...

1818
来自专栏C语言C++游戏编程

轻松学习C语言编程之函数知识详解

函数是一组一起执行任务的语句。每个C程序至少有一个函数,即main,所有最简单的程序都可以定义其他函数。您可以将代码划分为单独的函数。如何在不同的函数之间划分代...

642
来自专栏用户2442861的专栏

c++面试题

delete会调用对象的析构函数,和new对应free只会释放内存,new调用构造函数。malloc与free是C++/C语言的标准库函数,new/delet...

701
来自专栏Java爬坑系列

C++中的显式类型转化

  类型转化也许大家并不陌生,int i; float j; j = (float)i; i = (int)j; 像这样的显式转化其实很常见,强制类型转换可能会...

1957
来自专栏Python爱好者

Java基础笔记03

1108
来自专栏互联网杂技

深入理解javascript原型和闭包(1)——一切都是对象

“一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然,也不是所有的都是对象,值类型就不是对象。 首先咱们还是先看看javascript中一个常...

35416
来自专栏Spark学习技巧

浅析Java中的final关键字

  谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字。另外,Java中的String类就是一个final类,那么今...

3137
来自专栏老秦求学

位运算及其编程妙用

位操作符通常用来对操作数进行位级的操作运算。首先将运算符转换为位级,然后对操作数执行计算。可以在比特级执行诸如加法,减法,乘法等的数学运算以便更快地处理。

983

扫码关注云+社区