最后一个作业，end中的css文件的代码中， position: relative;（81行）和 position: absolute;（96行）的作用是什么？

来源：12-1 大作业

tanglili

2016-07-29

各位老师、同学们，请问一下，最后一个作业，end中的css文件的代码中， position: relative;（81行）和 position: absolute;（96行）的作用是什么？

我在浏览器中将 position: relative;注释掉了，并没有发现有任何不对啊，而 position: absolute;下面也没有left、right、top、 bottom的取值，不过注释掉了position: absolute;右边的文字就向下掉了，这是为什么呢？代码为什么要这样写呢，我不是很明白，还望老师和同学们提导提导，非常感谢。

.tmtimeline > li {
position: relative;
}

.tmtimeline > li .tmtime {
position: absolute;
display: block;
width: 25%;
padding-right: 100px;
}

写回答

2回答

姜维

2016-07-29

.tmtime 增加 position: absolute，是想让他绝对定位。绝对定位的元素脱离了文档流，它的位置是相对于它最近的position值非static的祖先元素。如果没有这样一个祖先元素，则相对于原始的容器。这里需要相对 li 来绝对定位，所以把 li 设置为了 position: relative。因为没有设置 top、left 之类属性，所以 top、left 相当于 auto，你可以设置一下，就看到差别了。