css定位学习

css定位(position)学习

什么是定位？

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位

1. 普通流简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程，这里div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
   

2. 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
   CSS 中，我们通过 float 属性实现元素的浮动
   
   例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：
   
   因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。
   下面我们把div2和div3都加上左浮动，效果如图：
   
   同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。
   得出结论：
   假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
   假如我们把div2、div4左浮动，效果图如下：
   
   CSS:为什么要浮动，清除浮动的本质是什么？清除浮动有哪些方法？
   块级元素往往独自占一行的位置，如果我们想要两个、三个甚至多个块级元素在一行上显示怎么办?
   这时候我们就要用到浮动floast，float浮动后块级和块级之间是紧紧挨着的，不会有间距存在，而inline-block虽然也能在一行显示，但中间会有间距存在，且不好去除。
   tips：在一个盒子内，不浮动就都不浮动，要浮动就都浮动。
   清除浮动的本质是什么？
   清除浮动主要就是为了解决父级元素因为子元素浮动而引起内部高度为0的问题，清除浮动后，父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。（没有添加浮动属性的就是标准流。
   清除浮动有哪些方法？
   给父元素添加after伪类和zoom的方法，也是最推荐的方法。
   
   定位
   css常用的定位
   定位也是用来布局的，它有两部分组成：
   定位 = 定位模式 + 边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

3.2.1 静态定位(static) - 了解

• 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
• 静态定位 按照标准流特性摆放位置，它没有边偏移。
• 静态定位在布局时我们几乎不用的

3.2.1 相对定位(relative) - 重要

• 相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）

效果图：

相对定位的特点：（务必记住）

• 相对于 自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

• 绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

1. 完全脱标 —— 完全不占位置；

2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

3. 父元素要有定位

• 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
• 

固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

1. 完全脱标 —— 完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
   • 跟父元素没有任何关系；单独使用的
   • 不随滚动条滚动。