定位

静态定位static：是默认的定位方式，无定位，按照标准流摆放位置

相对行为relative：相对于盒子本来的位置产生移动，并且不脱标，不会因为移动占用别的元素位置，但是本身没有移动前的位置会被占用

绝对定位absolute：有父元素，则相对父元素移动，没有则相对浏览器移动。如果父级或者祖宗级有定位，则相对最近的有定位的祖宗移动。这种定位脱标，完全不会占用任何位置

固定定位fixed：相对浏览器可视窗口定位，不会被其他已定位或未定位的元素影响

 

子绝父相：自己绝对定位，父级相对定位

一般给父盒子设置相对定位，但是不会设置它的top left，因为不需要父元素移动，且大部分时候我们正真需要移动的那个元素都是相让它相对某个元素的位置去移动，直接相对父亲，可以很好的写出css

 

想让固定定位元素占到a元素的右边：

.fixed{
  position:fixed;
  left:50%; 
  margin-left:500px; <!-- a元素宽度的一半 -->

}

 

粘性定位：(兼容性不好)

当一个元素本来被浏览器窗口遮挡，使用滚动让这个元素完全展示的时候，再继续滚动就不会被浏览器遮挡的时候

{
  position: sticky;
  top: 10px
}