2020-10-31

目录

前言

一、CSS的定位方法和叠放次序

二、使用步骤

 

总结

---

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS的定位方法和叠放次序

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

 

static 静态定位          不脱标                         不能使用偏移  很少使用

relative 相对定位       不脱标（占有位置）   相对于自身位置移动   常用

absolute 绝对定位    脱标（不占有位置）   带有定位的父级     常用

fixed 固定定位           脱标（不占有位置）  浏览器可视区     常用

sticky 粘性定位      不脱标（占有位置）  浏览器可视区    当前阶段少

 

在使用定位布局时 可能出现盒子重叠的情况。此时，可以使用z-index 来控制盒子的前后次序

选择器（z-index：1；）

数值可以是正整数 ，负整数或0 默认是auto 数值越大 盒子越靠上

如果属性值相同 则按照书写顺序 后来居上

 

绝对定位盒子居中算法

水平居中

1. left走父容器宽度的一半

2 margin 负值 往左边走 自己盒子宽度的一半

垂直居中

1top

2.margin

 

---

总结

相对定位 固定定位 绝对定位两个大的特点：1是否占有位置（脱标否）2，以谁为基准点移动位置

学习定位重点学会子绝父相

只有定位的盒子才会有Z-index属性

定位特殊性

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

1行内元素添加绝对或固定定位。可以直接设计高度和宽度

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

脱标的盒子不会触发外边距合并

 

绝对定位和固定定位会完全压住盒子

浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准盒子里面的内容

浮动之所以不会压住文字，因为浮动产的目的是为了做文字环绕效果