css中的定位

ThikHome 2020-06-05

css中有三种基本的定位机制:普通流、浮动流、定位流

1、普通流:上下排列的布局 (大部分情况)

2、浮动流:左右排列的布局 (大部分情况)

3、定位流:层叠(叠加)排列布局(大部分情况)

定位属性

position:检索或设置对象的定位方法

  • static :默认值,没有定位,可以用于取消元素之间的定位设置

  • relative:相对定位(参照物是自身所在的位置)

    • 如果没有定义偏移量,对元素本身没有任何影响

    • 不使元素脱离文档流,空间是会保留

    • 不影响其他元素布局

    • left、top、right、bottom是相对于当前元素自身进行偏移,不能独自存在,必须配合定位元素进行使用

  • absolute:绝对定位(参照物:包含块-该元素的祖先级元素)

    • 使元素完全脱离文档流

    • 使内联元素支持宽高(让内联具备块特性)

    • 使块元素默认宽根据内容决定(让块具备内联属性)

    • 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

      • 注:如果祖先元素中有多个元素具备定位属性,那么是以离自己最近的祖先元素进行偏移

    • 注:默认情况下是相对于可视窗口进行定位的。

    • 包含块:包含块是绝对定位的基础

      • 绝对定位元素会根据包含块进行绝对定位,默认情况下,浏览器的可视窗口是一个大的包含块,默认情况下,绝对定位元素会相对浏览器的可视窗口进行定位;如果他的祖先级元素定义里包含块,那他就最近的祖先级元素进行绝对定位。

      • 如何给祖先级元素定义成包含块:给祖先级元素添加position:relative/absolute/fixed。

  • 绝对定位和相对定位的区别

    • 1、相对定位的参照物是自己本身所在的位置,绝对定位的参照物是包含块

    • 2、相对定位是不会脱离文档流的,而且不会对页面的布局产生影响;绝对定位是会脱离文档流的,之前的位置就不再占用,后面的内容会把位置补上去

  • z-index:auto/ number 检索或设置对象的层叠顺序

    • auto:默认值

    • number:无单位的整数值。可为负数

    • 没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上

    • 注:他只针对具有定位属性的元素起作用

  • fixed:固定定位(参照物:始终都是相对于整个浏览器窗口进行固定定位的)

    • 使元素完全脱离文档流

    • 是内联元素支持宽高(让内联具备内联块属性)

    • 使块元素默认宽根据内容决定(让内联具备内联块属性)

    • 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,不会受到祖先元素的影响

  • sticky 黏性定位

    • 在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。

    • 只支持top和left方向

    • 设置了sticky的元素,在屏幕范围时该元素的位置并不受定位影响(设置top、left等属性无效),当该元素的位置将要移出偏移范文时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

相关推荐