定位
定位有三种,分别是:相对定位,绝对定位还有固定定位。
相对定位:position:relative;
绝对定位:position:absolute;
固定定位:position:fixed;
相对定位:
就是相对自己原来的位置进行的位置移动:
position:relative;
left:100px;/*相对自己原来的位置向右移动100px*/
top:150px;/*相对自己原来的位置向下移动150px*/
相对定位不脱标,本质上说相对定位移动的属性本体还是在原来的位置,移动的只是渲染的图形位置。
相对定位的定位值:
可以用left,right来描述盒子的左右移动;可以用top,bottom来描述盒子的上下移动。
相对定位的用途:相对定位本体站位,所以一般不用于做“压盖”效果。用于微调元素或者做绝对定位的参考。
绝对定位:
position:absolute;
top:250px;/*相对于左上角原点位置向下移动250px*/
left:200px;
绝对定位的盒子,是脱离标准文档流的。所以所有标准文档流的性质在绝对定位之后都不会遵守了。在绝对定位之后,标签就不区分所谓的行内元素和块级元素了,不需要display:block;就可以设置宽高了。
span{
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-ccolor:red;
}
绝对定位的参考点:如果用top描述,那么定位的参考点就是页面的左上角,而并不是浏览器的左上角。如果用bottom描述,那么定位的是浏览器开启屏幕的左下角,位置固定,可以被页面卷走。
以盒子为参考点:一个绝对定位的元素,如果上级元素中出现定位了,那么就以定位了的上级元素为参考点。如果上级元素出现都有定位,则以最近的定位了的上级元素为参考点。任何定位都可以作为参考点。不过工程上绝对定位脱标了,如果两个盒子都脱标,页面不稳固所以很少使用。最常用的还是用相对定位来作为绝对定位的参考点。
绝对定位的盒子,无视padding。
绝对定位盒子居中:
div{
width:600px;
height:60px;
padding:50px;
position:absolute;
left:50%;/*让盒子的左边线居中*/
top:0;
margin-left:-350px;/*要盒子居中必须向左边移动盒子的真实宽度的一半距离*/
}
固定定位:
固定定位就是相对浏览器窗口定位。页面如何滚动,都不会跟随移动。
.backtop{
position:fixed;
bottom:100px;
right:60px;
}
固定定位脱离标准文档流。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送
