原创 码农笔记 CSS笔记

CSS 定位

定位的组成

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

定位模式

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

边偏移

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

定位的使用

静态定位 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 属性

本文由 小但 创作
全文共：1492个字
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: Jan 24, 2021 at 11:40 pm