父级默认定位顺序
  1. 父级没有设置样式
  2. 父级为static
  3. 父级为absolute
  4. 父级为relative
  5. 父级为fixed
position相关参数的含义
  • static:
  • 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • absolute:
  • 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。会使dom元素产生一定包裹性，有点类似设置元素样式为display:inline-block，会变成自适应内部元素的宽度，如果内部元素没有设置宽高，会产生父级高度坍塌
  • relative:
  • 生成相对定位的元素，相对于其正常位置进行定位。
  • fixed:
  • 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
自身position为static案例集合

  1. 这是一个自身position为static，父级没有设置样式，查看我的定位

  2. 这是一个自身position为static，父级为static，查看我的定位

  3. 这是一个自身position为static，父级为absolute，查看我的定位

  4. 这是一个自身position为static，父级为relative，查看我的定位

  5. 这是一个自身position为static，父级为fixed，查看我的定位

自身position为static的时候

父级为absolute会靠近最近relative定位的，所以二和三的序号在一起，内容也在一起

父级为fixed的时候，不配置top，bottom，left，right的话，会自动固定在自身页面初始加载的位置，不会随着页面的滚动而滚动， 但是请注意，如果不配置相关参数 ，页面在初始加载这个dom元素不在浏览器的可视区域内，那这个元素会一直固定在那个你看不到的区域内，你再也看不到了。

这个时候整个ol的高度是两个li高度

自身position为relative案例集合

  1. 这是一个自身position为relative，父级没有设置样式，查看我的定位

  2. 这是一个自身position为relative，父级为static，查看我的定位

  3. 这是一个自身position为relative，父级为absolute，查看我的定位

  4. 这是一个自身position为relative，父级为relative，查看我的定位

  5. 这是一个自身position为relative，父级为fixed，查看我的定位

自身position为relative的时候

父级为absolute会靠近最近relative定位的，所以二和三的序号在一起，内容也在一起

父级为fixed的时候，不配置top，bottom，left，right的话，会自动固定在自身页面初始加载的位置，不会随着页面的滚动而滚动， 但是请注意，如果不配置相关参数 ，页面在初始加载这个dom元素不在浏览器的可视区域内，那这个元素会一直固定在那个你看不到的区域内，你再也看不到了。

这个时候整个ol的高度是两个li高度

自身position为absolute案例集合

  1. 这是一个自身position为absolute，父级没有设置样式，查看我的定位

  2. 这是一个自身position为absolute，父级为static，查看我的定位

  3. 这是一个自身position为absolute，父级为absolute，查看我的定位

  4. 这是一个自身position为absolute，父级为relative，查看我的定位

  5. 这是一个自身position为absolute，父级为fixed，查看我的定位

自身position为absolute的时候，自身的权重会高一些，它希望所有的按照他的思路来，在布局上会有一个包裹性

换种说法就是让元素inline-block化，例如一个元素默认宽度是100%显示的，设置为absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。

父级为static，所以它就不管父级定位，他就去找最近的一个定位为非static的元素，所以序号为一的内容显示在序号为二的旁边，但是在显示上还是要听父级的话没有变成inline-block的效果，继承了父级的

父级为absolute会靠近最近relative定位的，所以二和三的序号在一起，但是由于自身是absolute，他就去找最近的一个定位为非static的元素，

父级为fixed的时候，不用设置top，bottom，left，right，会自动固定在自身页面初始加载的位置，不会随着页面的滚动而滚动

这个时候整个ol的高度是两个li高度

自身position为fixed案例集合

  1. 这是一个自身position为absolute，父级没有设置样式，查看我的定位

  2. 这是一个自身position为fixed，父级为static，查看我的定位

  3. 这是一个自身position为fixed，父级为absolute，查看我的定位

  4. 这是一个自身position为fixed，父级为relative，查看我的定位

  5. 这是一个自身position为fixed，父级为fixed，查看我的定位

自身position为fixed的时候

父级为absolute会靠近最近relative定位的

父级为fixed的时候，不配置top，bottom，left，right的话，会自动固定在自身页面初始加载的位置，不会随着页面的滚动而滚动， 但是请注意，如果不配置相关参数 ，页面在初始加载这个dom元素不在浏览器的可视区域内，那这个元素会一直固定在那个你看不到的区域内，你再也看不到了。

这个时候整个ol的高度是两个li高度