position

absolute是绝对定位的,是相对于浏览器。relative是相对的,如果有父类就相对于父类,如果没有就先对与浏览器。

下面看下有父类的情况:

<style type="text/css">
.test{
position:absolute;
top:100px;
left:100px;
border:1px solid red;
padding-top:10px;}

.test2{
border:1px solid blue;
top:100px;
left:100px;
position:relative;}
</style>
</head>

<body>
<div class="test">
postion test
<div class="test2">
position test2
</div>
</div>
</body>
</html>

那么他是相对与padding的text的:

要计算就要从position test的下面开始算。

2、我不知道为什么absolute的border的框怎么会框住文字而其他不会,比如下满看下relative吧:

 待续吧。以后有更好的心得再续。

原文地址:https://www.cnblogs.com/huaizuo/p/2123286.html