定位学习了

定位

相对定位：相对于自身，移位后占有原有位置（自恋型）

绝对定位：相对于祖先元素（拼爹型）

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
• 如果有多个祖先元素，以最近的带有定位的为准
• 绝对定位不占有原有位置

子绝父相

子元素加绝对定位，父元素加固定定位

固定定位：固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的元素的位置不会改变。

• 不随滚动条滚动而变化
• 与父元素无关
• 不占有原有位置

固定定位小技巧（贴在版心右侧）：

1、left:50%

2、margin-left:版心宽度一半距离

粘性定位sticky：

粘性定位的特点:

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点)

2. 粘性定位占有原先的位置(相对定位特点)

3. 必须添加top . left、right、bottom其中一个才有效
   跟页面滚动搭配使用。兼容性较差，IE不支持。

定位叠放次序 z-index

绝对定位盒子居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqswNwWv-1644653939506)(C:/Users/ypc123/OneDrive/%E5%9B%BE%E7%89%87/typora-Img/image-20220206172130066.png)]

定位的特殊性：

绝对定位和固定定位和浮动类似。

1、行内元素，添加绝对或固定定位，可直接设置高度和宽度

2、块级元素添加绝对或固定定位，如果不给宽度或高度，默认为内容大小

浮动不会压住标准流的文字，但是定位会