定位

CSS定位属性共有三种:
1.相对定位 relative
2.绝对定位 adsolute
3.固定定位 fixed
相对定位:
相对与自己原来的位置定位,进行位置的调整。
图片一:
CSS定位总结 (margin与相对定位调整位置的区别:
1.盒子和盒子的距离,间隙。相对定位:位置的调整
2.margin会影响后面的元素。相对定位不会影响别人。
不脱标。坑位还占着,别人挤不走。
做绝对定位的参考,子绝父相。)

<1>绝对定位:
找一个参考系,定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left,right 纵坐标用top和botto。
图片一:
CSS定位总结
图片二:
CSS定位总结 以盒子为参考点:
一个绝对定位的元素,如果祖先元素中出现了已定位的元素,那么将以该元素为参考点。
1.以最近的已经定位的祖先元素,不一定是父容器,也可以是爷爷。
2.不一定是相对对位,任何定位信息,都可以做子容器的参考点。
3.使用最多的子绝父相。
4.以父容器的border内侧点为参考点,进行定位。
应用:
1.压盖效果,一个div压在另一个div上面。
2.绝对定位的盒子居中。 left:50%;margin-left: -自身宽度的一半。

<2>固定定位:
相对浏览器进行定位,无论页面怎么滚动, 这个盒子显示的位置不变。
用途:
1.网页返回顶部,侧边广告。
2.顶部固定导航条
图片一:
CSS定位总结
图片二:

CSS定位总结

z-index属性

z-index 属性 是定位元素专用的。 属性值是数字,数值大的会压盖住数值小的。
z-index都没有值或值相同的时候,写在后面的盒子会盖住前面的盒子。
数值大的会盖住数值小的,z-index是一个自然数,默认为0.
从父现象:大家都有z-index的值的时候,会比较父容器的z-index,如果父1比父2大,就算儿子2比儿子1大,儿子1也能压住儿子2。
图片一:CSS定位总结图片二:CSS定位总结

相关文章:

  • 2021-10-06
  • 2022-02-28
  • 2021-07-25
  • 2021-12-03
  • 2021-12-03
  • 2021-08-26
  • 2021-05-15
猜你喜欢
  • 2021-09-10
  • 2021-12-15
  • 2022-12-23
  • 2022-12-23
  • 2021-04-06
  • 2022-01-06
  • 2022-12-23
相关资源
相似解决方案