CSS定位 + 元素的显示与隐藏

目录

1.定位

1.1 为什么需要定位

1.2 定位组成

        1.2.1 定位模式

        1.2.2 边偏移

 1.3 静态定位static （了解）

1.4 相对定位 relative （重要）

1.5 绝对定位 absolute （重要）

1.6  子绝父相

1.7  固定定位 fixed （重要）

        1.7.1 固定到版心右侧

 1.8  粘性定位 sticky （了解）

 1.9  定位叠放次序 z-index

1.10  定位的拓展

        1.10.1 绝对定位的盒子居中

         1.10.2  定位特殊特性

        1.10.3 绝对定位（固定定位）会完全压住盒子

2. 元素的显示与隐藏

2.1 display 属性（非常重要）

2.2 visibility 可见性

2.3 overflow溢出

---

1.定位

1.1 为什么需要定位

定位可以让盒子自由的在某个盒子内移动位置 或者 固定屏幕中的某个位置，并且可以压住其他盒子

1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 =定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式

边偏移：决定了该元素的最终位置

        1.2.1 定位模式

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

• static                    静态定位
• relative                 相对定位
• absolute               绝对定位
• fixed                     固定定位

        1.2.2 边偏移

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

 1.3 静态定位static （了解）

静态定位 元素与的默认定位方式，无定位的意思。

语法 ：  选择器 {position：static；}

• 静态定位按照标准流特性摆放位置，它没有偏移
• 静态定位在布局时很少用到

1.4 相对定位 relative （重要）

相对定位 是元素在移动位置的时候，是相对于它原来的位置来说的。（自恋型）

语法 ： 选择器{ position：relative；}

特点：

1. 移动位置的时候参照点是 自己原来的坐标
2. 原来 在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）

典型的定位是 给绝对定位当爹的？？？

1.5 绝对定位 absolute （重要）

绝对定位 是 元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）

语法： 选择器 { position：absolute；}

特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）
2. 如果祖先元素有定位（相对relative，绝对absolute，固定定位），则以最近一级的有定位祖先元素为参考点在里面移动位置
3. 绝对定位不再占有原来