相对定位:脱离文档流,是一个相对的位置,一般设置在父元素,可以理解为一个“标准”。
position:relative 开启了相对定位
1、如果不设置偏移量,元素的位置是不发生任何变化
2、设置偏移量,偏移量的相对位置是相对于元素原来在文档流中的位置(left:0;top:0)
3、设置相对定位后,元素的性质是不发生变化
4、设置相对定位后,元素的层级会提高
5、设置相对定位后,元素是不会脱离文档流
绝对定位:同样脱离文档流,一般设置在子元素,也就是子元素相对父元素的位置进行调整,即根据“标准”进行方向的设定
开启绝对定位
position: absolute;
绝对定位后的特点
1、设置绝对定位后,元素会脱离文档流
2、设置绝对定位后,元素的性质就会发生变化,就不会再区分块还是行内了
3、设置绝对定位后,如果不设置偏移量,元素的位置也不会发生变化
4、绝对定位,它的原点是相对于其包含块来定位的
5、设置绝对定位后,元素的层级也会提高
注意:一般情况下,为了更好的控制子元素的位置,
我们会在开启子元素的绝对定位后,会同步开启父元素的相对定位
这叫"子绝父相"
<footer>
<div>
Copyright (C) 当当网 2004-2017, All Rights Reserved<div class="t7"><img src="./图片素材/validate.gif" alt=""></div>京ICP证041189号出版物经营许可证 新出发京批字第直0673号
</div>
</footer>
footer{
position: relative;
bottom: 42px;
}
footer div{
text-align: center;
padding-top: 12px;
color: rgb(132,132,132);
}
.t7{
display: inline-block;
position: relative;
top: 20px;
}