发表于： 2019-04-20 21:19:20
1 400
今天完成的事情：任务八bug的修改，原本以为bug很快可以改完，没想到还是费了很大劲
明天计划的事情：开始进行任务九/十
遇到的问题：用bootstrap栅格时有个分成5列，搞了很久才分出来
收获：今天改完任务八后，看了看之前任务的深度思考，今天看的时任务四的position属性的用法
常用的几个属性：
static
所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。
relative
俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
relative的特点
仍在文档流之中，并按照文档流中的顺序进行排列。
参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。
absolute
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
absolute的特点
默认宽度为内容宽度
脱离文档流
参照物为第一个定位祖先或根元素（<html> 元素）
fixed
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
fixed的特点
默认宽度为内容宽度
脱离文档流
参照物为视窗
返回列表
评论