关于css中的定位以及使用

浮动

为了让多个元素在一行中进行显示

定位

1. 为了能够压住其他的元素
2. 能够自由的移动，而不影响其他元素
3. 为了不随滚动条滚动而滚动

定位中最重要的两点

• 是否脱离标准流（占不占位置）
• 参考谁来进行移动

1.静态定位 position: static;

2.相对定位 position: relative;

相对定位是参考原来自身的位置进行移动的，它会占用原来的位置

作用是给绝对定位的元素当父元素

3.绝对定位 position: absolute;

绝对定位会使元素脱离标准流，不占用原本的位置

注意：

3.1如果没有父元素，或者父元素没有添加定位的情况下，参考浏览器定位

3.2有父元素参考最近一个父元素定位

4.固定定位 position: fixed;

让元素固定于盒子或页面的某个地方，一般设置使其不随页面滑动而滑动，不占位置

5.粘性定位 position: sticky;

页面到达某个地方时，部分内容能贴到页面的位置不跟随滚轮继续滑动，滚轮滚回此地时，内容又脱离下来

注意：粘性定位还占用着原来的位置

组成：定位元素+边偏移