CSS学习笔记——CSS的定位问题

学习CSS布局的时候，对position的认识一直不是很清晰，以致于面试的时候回答的不清楚，现在好好的梳理一下这个问题。

CSS 有三种基本的定位机制：1.普通流  2.浮动  3.绝对定位 

1. 普通流：除非专门指定，否则所有框（div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”）都在普通流中定位。即，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

2. 浮动：CSS的float属性允许用户对元素进行向左向右浮动

3. 绝对定位：CSS的position属性允许用户对元素进行定位。

 

下面是position的四种不同类型的属性值及含义。

1. static：

    position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

2. relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

relative的偏移是基于对象本身的位置，基于对象margin的左上侧的。

    若有设置padding，则以padding内边界开始的

3. absolute：

（1）当该元素的父级对象设置了position属性，且position的属性值为absolute或者relative时，即不是默认值的情况下，当前元素按照这个parent来进行定位。

（使用absoulte，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间 变成relative的效果）

（2）那元素按照这个parent来进行定位时，是按照定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位

注意：当父级对象position设置为absolute后，当前元素会导致溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，此时它后面的同级元素将获得当前元素的位置，它的文档流不再基于当前元素，而是直接从父级元素开始。

4. fixed：

      使用fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个。原因同上absolute。fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。