CSS基础三（定位）

一、定位

position属性用于指定一个元素在文档中的定位方式。top right bottom left决定该元素的最终位置。

• static　指定元素使用正常的布局行为，即元素在文档流当前的布局位置。注意：此时top right bottom left z-index属性无效

• relative　元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。（不太理解）

• absolute　不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的便宜，来确定元素的位置。* （实际上，经常和relative搭配使用） *

• fixed　不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。（比如顶部导航条的实现）

• sticky　可以被认为是相对定位和固定定位的混合。元素在跨越特定阀值前为相对定位，之后为固定定位。必须制定top right bottom left其中之一，才能生效。否则和相对定位一样。比如MDN的示例： sticky.gif

笔记

１．将导航条使用fixed定位在顶部
结果发现，使用了定位的元素缩到左边去了。解决方法：设置宽度100%（不过这也是bug的来源）。又产生新的问题，太宽了！，如图１：

图１.png
实际上，由于刚才的宽度设置，这时候导航条的宽度＋padding已经大于页面宽度。解决方法：
第一步：取消导航条的左右padding，如图２： 图２.png
效果也并不好。
第二步：添加一个div，包裹导航条（同时要注意清除浮动），给这个div设置左右padding就可以。效果如图３：
图３.png

２．其他

• line-height: 有潜在的bug，在比较低的时候能用

３．svg

.userCard svg {
    width: 30px;
    height: 30px;
    fill: white;
/* 会偏上 ，添加下面代码*/
    vertical-align: top;
}