CSS定位position

  外边距margin、内边距padding控制的是一个块元素或行内块元素元素与另一个元素的间距，无法做到直接设置一个块元素在页面上的位置坐标或者相对另一个元素的坐标。 有基本的数学知识，都应该知道二维xOy笛卡尔坐标系，平时你写的属性width就是x轴所在的方向，height就是y轴坐在的方向，向右为x轴正方向，向下为y轴正方向。比如margin- top:50px表示一个元素相对另一个元素向下偏移50px，margin-top:-50px表示一个元素相对另一个元素向上偏移50px。

案例

  一些PC端的网站主要内容采用定宽度布局，同时在网页两侧有一些悬浮小窗口，下面代码实现一个小窗口紧靠在网页右侧边栏。

<style>
  /*右侧小窗口定位*/
  .right{
     /*position: absolute;!*绝对定位方式，以浏览器body区域窗口左上角为参照，会随着滚动条上下移动*!*/
     position: fixed;/*绝对定位方式，以浏览器body区域窗口左上角为参照，滚动滚动条，元素位置不变*/
     right: 0px;/*元素的右边缘距离body窗口区域右侧距离为0*/
     top: 200px;/*元素顶部距离body窗口区域顶部*/
     width: 200px;
     height: 200px;
     background-color: #0d72da;
   }
</style>

定位方式

position属性值列表

absolute、fixed

  网页布局绝对定位使用较少，往往都是为了满足特殊需要，比如官网右侧有一个悬浮的QQ窗口，顶部网页导航不随滚动条滚动而隐藏

  大家应该有一个印象，一般元素默认从左向右、从上到下排列，前面的元素会相应后面的元素布局，当你对一个元素使用绝对布局的时候，他不会影响其它的元素的布局

  position属性值为absolute、fixed，元素top、 bottom、left和right属性的意义

relative

  position属性值为relative，元素top、 bottom、left和right属性的意义

  既然是相对定位，那么它相对那个元素的位置，是父元素还是同级元素，这些不用考虑， 以该元素没有使用relative定位之前的正常布局为准，比如left:20px表示该元素向右 平移20个像素单位，right:20px表示该元素相对原来位置向左平移20px，left:20px和right:-20px 是等价的，比如往前走100m和往后走-100m是一个道理。至于正反方向不用记忆，但是心里要有个大概印象，比如正负数值的方向的反过来的， 使用的时候测试一下就行。

  relative相对定位在某种程度上有些类似外边距，使用相对定位的元素会影响其他元素的布局，这一点和使用绝对定位的元素相反。