定位

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

  1. 定位有三种,分别是:相对定位,绝对定位还有固定定位。
  2. 相对定位:position:relative;
  3. 绝对定位:position:absolute;
  4. 固定定位:position:fixed;
  5. 相对定位:
  6. 就是相对自己原来的位置进行的位置移动:
  7. position:relative;
  8. left:100px;/*相对自己原来的位置向右移动100px*/
  9. top:150px;/*相对自己原来的位置向下移动150px*/
  10. 相对定位不脱标,本质上说相对定位移动的属性本体还是在原来的位置,移动的只是渲染的图形位置。
  11. 相对定位的定位值:
  12. 可以用leftright来描述盒子的左右移动;可以用topbottom来描述盒子的上下移动。
  13. 相对定位的用途:相对定位本体站位,所以一般不用于做“压盖”效果。用于微调元素或者做绝对定位的参考。
  14. 绝对定位:
  15. position:absolute;
  16. top:250px;/*相对于左上角原点位置向下移动250px*/
  17. left:200px;
  18. 绝对定位的盒子,是脱离标准文档流的。所以所有标准文档流的性质在绝对定位之后都不会遵守了。在绝对定位之后,标签就不区分所谓的行内元素和块级元素了,不需要displayblock;就可以设置宽高了。
  19. span{
  20. position:absolute;
  21. top:100px;
  22. left:100px;
  23. width:100px;
  24. height:100px;
  25. background-ccolor:red;
  26. }
  27. 绝对定位的参考点:如果用top描述,那么定位的参考点就是页面的左上角,而并不是浏览器的左上角。如果用bottom描述,那么定位的是浏览器开启屏幕的左下角,位置固定,可以被页面卷走。
  28. 以盒子为参考点:一个绝对定位的元素,如果上级元素中出现定位了,那么就以定位了的上级元素为参考点。如果上级元素出现都有定位,则以最近的定位了的上级元素为参考点。任何定位都可以作为参考点。不过工程上绝对定位脱标了,如果两个盒子都脱标,页面不稳固所以很少使用。最常用的还是用相对定位来作为绝对定位的参考点。
  29. 绝对定位的盒子,无视padding
  30. 绝对定位盒子居中:
  31. div{
  32. width:600px;
  33. height:60px;
  34. padding:50px;
  35. position:absolute;
  36. left:50%;/*让盒子的左边线居中*/
  37. top:0;
  38. margin-left:-350px;/*要盒子居中必须向左边移动盒子的真实宽度的一半距离*/
  39. }
  40. 固定定位:
  41. 固定定位就是相对浏览器窗口定位。页面如何滚动,都不会跟随移动。
  42. .backtop{
  43. position:fixed;
  44. bottom:100px;
  45. right:60px;
  46. }
  47. 固定定位脱离标准文档流。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送
相关博客
Back to Top