定位 | 数据学习者官方网站(Datalearner)

```java
  定位有三种，分别是：相对定位，绝对定位还有固定定位。
  
  相对定位：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技术推送

相关博客

最热博客