今天是学习前端的第八天，主要学习了定位的相关内容。 一、定位的组成。 定位由定位模式和边偏移组成，定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。定位通过position属性来设置，其后可跟五个值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）以及sticky（粘性定位）。边偏移后可跟四个属性：top（顶部偏移量）、right（右侧偏移量）、bottom（底部偏移量）、left（左侧偏移量）。 二、定位的分类。 1.静态定位。静态定位是默认的定位方式，没有边偏移，按照标准流特性摆放位置，是无定位的意思，记为：选择器 {position：static；}。 2.相对定位。相对定位是相对于元素原来的位置来移动的，原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它，记为：选择器 {position：relative；}。 3.绝对定位。绝对定位是相当于移动元素的祖先元素来移动的，如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点移动位置；如果没有祖先元素或是祖先元素没有定位，则以浏览器为准，进行定位。绝对定位不会再占有原来的位置，记为：选择器 {position：absolute；}。 4.固定定位。固定定位是以浏览器的可视窗口作为参照点移动元素，固定在浏览器的某个位置，不随滚动条滚动。固定定位的元素于父元素没有任何关系，且脱离标准流，在页面中不占据位置。让元素固定在版心右侧位置的方法为：先让固定定位的盒子left：50%，然后再让其margin-left值为版心宽度的一半距离即可，由此也可以推断出将元素定位在页面中心等位置的方法。其语法记为：选择器{position：fixed；}。 5.粘性定位。粘性定位是以浏览器的可视窗口作为参照点移动元素，达到设定位置时不随滚动条滚动。粘性定位在页面中仍占有位置，记为：选择器{position：sticky；}。 三、子绝父相。 子级是绝对定位的话，父级要用相对定位，因为父级需要占有位置，所以是相对定位，子盒子不需要占有位置，就要用绝对定位。其特点为：1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不影响其他的兄弟盒子。2.父盒子需要加定位限制子盒子在父盒子内显示。3.父盒子布局时，需要占有位置，因此父盒子必须有除了固定定位和静态定位其他两种定位关系。 四、定位叠放次序。 定位的叠放次序可以控制盒子的前后次序，其语法记为：选择器{z-index：数值；}。其数值可以是正整数、负整数或0，默认值是auto，数值越大盒子越靠上。只有有定位的盒子才有z-index属性，如果是性质相同，则按照html标签书写顺序，后来居上。 五、其他注意事项。 1.定位的特殊性：行内块显示模式。行内元素添加绝对或者固定定位，可以直接设置宽度和高度；块级元素添加绝对或者固定定位，如果不给高度或者宽度，则默认大小为内容的大小。2.绝对定位或是固定定位的元素都不会触发外边距塌陷。3.与浮动不同，绝对定位或是固定定位的元素会压住下面标准流所有的内容，而浮动不会压住下面标准流盒子里的文字或图片。
