定位流分类

  • 相对定位(relative)
  • 绝对定位(absolute)
  • 固定定位(fixed)
  • 静态定位(static)

相对定位

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

box1
{
    /*相对定位*/
    position: relative;
    /*垂直方向(top、botton)*/
    top: 20px;
    /*水平方向(left、right)*/
    left: 20px;
}

注意点

  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间,可以设置宽度高度。
  • 在相对定位中同一个方向上的定位属性只能使用一个。
  • 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素。
  • 由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。

应用场景

  • 用于对元素进行微调
  • 配合绝对定位来使用

绝对定位

绝对定位相对于body来定位

.box1
{
    /*绝对定位*/
    position: absolute;
    /*上右下左的绝对位置*/
    left: 0;
    bottom: 0;
}

注意点

  • 绝对定位的元素是脱离标准流的
  • 绝对定位的元素是不区分块级元素/行内元素/行内块级元素
  • 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
  • 一个绝对定位的元素会忽略祖先元素的padding

参考点规律

  • 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
  • 如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点（就近原则）
  • 如果一个绝对定位的元素有祖先（父）元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
  1. 只要是绝对定位元素的祖先元素都可以作为参考点
  2. 定位流只有绝对定位(absolute)/相对定位(relative)/固定定位(fixed)可以作为参考点
  3. 定位流中只有静态定位(static)不能作为参考点

子绝父相

  • 相对定位弊端:相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
  • 绝对定位弊端:默认情况下绝对定位的元素会以body作为参考点,所以会随着浏览器的宽度高度的变化而变化
  • 子绝父相:子元素用绝对定位, 父元素用相对定位

绝对定位的元素水平居中

  1. 设置绝对定位元素的left:50%
  2. 再设置绝对定位元素的 margin-left: -元素宽度的一半px;

固定定位

背景定位可以让背景图片不随着滚动条的滚动而滚动,而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点

  1. 固定定位的元素是脱离标准流的, 不会占用标准流中的空间
  2. 固定定位和绝对定位一样不区分行内/块级/行内块级
  3. IE6不支持固定定位

z-index属性

z-index属性的作用是专门用于控制定位流元素的覆盖关系的(优先级)

  1. 默认情况下定位流的元素会盖住标准流的元素
  2. 默认情况下定位流的元素后面编写的会盖住前面编写的
  3. 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
  4. 默认情况下所有的元素都有一个默认的z-index属性, 取值是0

从父现象:

  1. 如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
  2. 如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面

参考资料

「李南江」HTML+CSS 基础入门教程全套视频|HTML5+CSS3基础+案例

赏