定位

第七天 定位

相对定位

特点

  • 不脱离文档流
  • 相对定位的层级要比其他层级要大(会覆盖在其他元素之上)
  • 当发生位置改变时,原来的位置还被占用着
  • 参照物是自己
  • 给决定定位当参照物来用
  • 当同时设置left 和right值时,left值生效,同时设置top和bottom 值时,top值生效

以下两点是相对定位常用的情况

  1. 当相对定位自己改变位置时,又不影响其他元素,可以用相对定位
  2. 给绝对定位当参照物来用

绝对定位

特点

  • 脱离文档流
  • 在不设置参照物时,参照物是body
  • 在设置参照物时,需要满足以下两个条件:
    • 这个参照物必须是绝对定位的父级元素
    • 这个父级元素必须带有定位属性(相对,绝对,固定)
  • 当绝对定位这个属性设置宽高为100%,继承的是参照物的宽高
  • 当绝对定位这个元素不设置四个方向值时,这个绝对定位元素的前面有其它同级元素,默认会排在这个同级元素的后面
  • 在不设置宽高时,宽高是由内容决定的
  • 当同时设置left 和right值时,left值生效,同时设置top和bottom 值时,top值生效

固定定位

特点

  • 参照物时浏览器可视窗口
  • 在不设置宽高时,宽高是由内容决定的

固定定位一般用在网站的侧边栏,回到顶部的结构上

< a href= "#">回到顶部< a>
当href标签属性值为空或者为一个 "#"时,有一个回到顶部的作用

改变定位的层级关系 z-index

  • 当多个元素是同级关系时,想让谁在上面就设置谁的z-index值
  • 当定位的父级元素同时设置z-index值时,子元素与父元素相比较是不生效的

设置定位时,若是不给它top,left,bottom,right值时,他们会出现在文档流中会出现的位置

猜你喜欢

转载自www.cnblogs.com/tiantian9542/p/8971887.html