CSS中的定位

一,定位介绍

定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right…等来实现的.

二,定位类别

1.相对定位

相对定位就是相对于自己以前在标准流中的位置来移动

语法:

position: relative; 配合left, top, right,bottom等属性使用

3. 特点

• 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

• 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom

• 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

• 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素

• 设置margin/padding等属性的时会影响到标准流的布局

2.绝对定位

1. 默认情况下绝对定位就是相对于body来定位

2. 语法

position: absolute; 配合left, top, right,bottom等属性使用

3. 特点

• 绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素/行内块级元素

• 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

• 默认情况下绝对定位就是相对于body来定位, 但是如果一个绝对定位的元素有祖先(父亲,爷爷)元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素(最近的祖先)作为参考点

3.固定定位

1. 固定定位可以让某个盒子(元素)不随着滚动条的滚动而滚动

2. 语法

position: fixed; 配合left, top, right,bottom等属性使用

3. 特点

• 固定定位的元素是脱离标准流的, 不会占用标准流中的空间

• 固定定位和绝对定位一样不区分行内/块级/行内块