CSS 定位
| 分类在:CSS笔记 | 有 0 条评论

CSS 定位

| 分类在:CSS笔记 | 有 0 条评论

CSS 定位

定位的组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式,它通过CSS的 position 属性来设置,其值可以分为四个:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘性定位

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4个属性。

边偏移属性示例描述
toptop:80px顶端偏移量,定义元素相对于其都元素上边线的距离
bottombottom:80px底部偏移量,定义元素相对于其都元素下边线的距离
leftleft:80px左侧偏移量,定义元素相对于其都元素左边线的距离
rightright:80px右侧偏移量,定义元素相对于其都元素右边线的距离

定位的使用

静态定位 static

静态定位是元素的默认定位方式,没有定位的意思。
语法规范:

选择器{position:static;}

相对定位 relative

相对定位是元素在移动位置的时候,相对于它原来的位置进行偏移。
语法规范:

选择器{position:relative;}

注意:

  1. 它是相对于自己原来的位置进行移动的(移动位置参照点是自己原来的位置)
  2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)

绝对定位 absolute

绝对定位是元素在位置移动的时候,是相对于他的祖先元素来说的。
语法规范:

选择器{position:absolute;}

注意:

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准进行定位
  2. 如果祖先元素有定位,则以最近一级祖先元素为准进行定位
  3. 绝对定位不在占有原来的位置(脱标)

固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景:固定不动的盒子
语法规范:

选择器{position:fixed;}

注意:

  1. 以浏览器的可视窗口为参照点移动元素

    • 跟父元素没有任何关系
    • 不随滚动条滚动而滚动
  2. 固定定位不保留原先的位置(脱标)

粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。

选择器{position:sticky;top:10px;}

注意:
1.以浏览器的可视窗口为参照点移动元素
2.粘性定位占有原先的位置
3.必须添加 top、left、right、bottom其中一个才有效

定位的叠放顺序 z-index

选择器{z-index:1;}

注意:

  1. 数值越大,盒子越靠上
  2. auto 情况下,后来者居上
  3. 数字后面不能加单位
  4. 只有定位的盒子才有 z-index 属性

留言: