本节内容主要是为了复习之前学习的css内容以及在学习css各种布局中存在的一些知识盲区和遗漏点,主要起到巩固作用。

1. 定位布局

css定位布局是通过position属性来设置,取值有static,relative,absolute,fixed,sticky;

1.1 static(静态定位)

为定位布局中的默认定位，页面元素从上到下，从左到右正常排列的正常文档流；

具体图示如下：

1.2 relative(相对定位)

relative相对定位即在元素位置确定之后，通过left,top,bottom,right属性来改变元素的偏移。但是元素所占的空间还是处于原来的位置。页面上其他的元素不会对该元素的空间进行挤压。

具体图示如下：

1.3 absolute(绝对定位)

absolute绝对定位会将元素移出正常的文档流，后面的元素会将设置绝对定位的元素所在的空间给占领掉，但是绝对定位的元素会覆盖在后面的元素的上方位置.

具体图示如下：

absolute绝对定位也可以通过设置left,top,bottom,right属性值来设置元素的偏移，但是绝对定位的偏移量是根据此元素的包含元素来发生偏移的。

如果设置了绝对定位的元素的所有父级元素都没有设置position，transform,perspective属性，那么他的包含元素即包含html的容器，即页面窗口，则该元素的偏移量根据页面窗口的左上角发生偏移，具体图示如下：

如果设置了绝对定位的元素的父级元素有设置position(除了statics属性)，transform,perspective属性，那么该父级元素即包含元素，则该元素的偏移量根据此父级元素发生偏移，具体图示如下：

1.4 fixed(固定定位)

fixed固定定位的包含元素为浏览窗口，在通过left,right等值设置好偏移量，页面发生滚动后，元素会固定在浏览窗口的一个位置

1.5 sticky(粘性定位)

sticky粘性定位相当于relative和fix两点的结合，它发生在浏览器页面向下滚动，距离顶部一定位置时，元素固定在窗口上一处。具体图示如下所示：