定位

标签:## 时间:2018/10/19 22:15:36 作者:Shino

  定位有三种,分别是:相对定位,绝对定位还有固定定位。

  相对定位: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技术推送
相关博客