相对定位与绝对定位

页面定位问题

在CSS技术中有一个重要的技术：定位。定位分为：相对定位，绝对定位，固定定位。

1、相对定位：relative

相对定位是相对于自己进行定位。即相对自身进行位置变动，如：
<div></div>
div{       
      width: 100px;
      height: 100px;
      background-color: blue;
    }
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200326092339108.png)
    这是一个普通的div。加上position:relative后这个div便能够根据自身进行相对定位。由top，bottom,left,right设置离自身的位置。
   div{
      position: relative;
      left: 20px;
      background-color: red;
    }
 	![在这里插入图片描述](https://img-blog.csdnimg.cn/20200326094610507.png)
    有了   position: relative;left: 20px;div就会自身原来的基础上离自身左边20px移动。
    ps:权重问题，如果相对定位中既有left,又有right或者既有top又有bottom怎么办呢，在这里left和top的权重高于right和buttom，如果都存在，right和bottom会失效。如：
    div{
      position: relative;
      left: 20px;
	  right:20px;
      background-color: red;
    }
    这里的运行的效果和上面是一样的，因为right:20px并没有生效。
    **ps：**
    1.相对定位的元素不会脱离文档流(所以元素在文档流中的特征他都包含)

	2.相对定位元素会提升一个层级(如果与其他元素发生重叠 它会在上面)
	
	3.相对定位不会改变元素的性质(块元素仍然是块元素,行内元素仍然是行内元素)
	
	4.相对定位不设置任何偏移值,.元素则不会有任何变化

2 绝对定位

相对定位时相对于自身定位，位置是不确定的。而绝对定位是相对于最近一个已经定位了的父级元素定位。这样做的好处就是如果一个模块的东西变动，我们用了绝对定位就只用变动父元素，其子元素的位置全部都会跟着变动。html：
 <div id="fu">
   <div id="zi">
   </div>
 </div>
 由于父元素需要定位，一般来说我们就给父元素采用相对定位，这样模块的独立性比较容易体现，就有了**“子绝父相”**这样的说法。CSS:
  #fu{       
      position: relative;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    #zi{
      position: absolute;
      left: 20px;
      right: 20px;
      top: 20px;
      bottom: 20px;
      background-color: red;
    }
    效果如图：

ps:
1。top,bottom或者left，right的值相等的情况下，子元素就可以实现上下，左右居中的效果。
2。相对定位的原理其实就是绝对定位。是在自身原有的位置上添加一个子元素，给子元素加上绝对定位，然后隐藏父元素就达到了相对自身定位的效果。
3。在html中，如果子元素没有宽高，将会参照父元素的宽高。在决定定位中，如果不给left或者right赋值，元素将不会有宽度，同理，不给top或者bottom赋值，元素不会有高度。如果设置为0，子元素宽高等于父元素。
也可以手动给子元素设置宽高，默认为width:auto,height:auto，参照规则如上所述。
4。绝对定位脱离文档流，如果多个子元素定位相同，后面的子元素会提升一个层级，所以后面的子元素会覆盖前面的。
5。绝对定位如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)
6。绝对定位会改变元素的性质.行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)

3 固定定位

固定定位相对于浏览器窗口进行定位。不会随滚动条变动而改变位置。常见于网页上左右两个的导航栏，广告等。css:
div{
position:fixed;
left:…;
top:…;
}
ps:
固定定位也是绝对定位的一种.拥有绝对定位的大部分特点,比如也会脱离文档流。