position:absolute和position:fixed元素位置和宽度高度的问题
绝对定位或者固定定位的元素可以用left、right、top、bottom四个属性指定，那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢？
left、right、top、bottom四个属性全部指定
代码如下：
html和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
main {
position: fixed;
left: 0;
right: 100px;
top: 100px;
bottom: 100px;
background-color: gray;
}
</style>
</head>
<body>
<main>
<article style="width:100px"></article>
</main>
</body>
</html>
结果如下图：
可以看到元素的上下左右边界所处的位置分别由四个属性指定，宽度和高度是父元素的宽度和高度减去四个属性。
只指定right、top、bottom
main {
position: fixed;
right: 100px;
top: 100px;
bottom: 100px;
background-color: gray;
}
得到的效果如下图：
我们可以发现，元素的宽度是100px，也就是左边的所有剩余空间都被分配到了left上，我们可以假定这是left的默认值。
结论
- 当上下左右四个属性都指定了的时候，元素的宽度和高度由定位相对的元素的宽度和高度以及上下左右四个属性所决定
- 当上下左右某个属性未指定的时候，该属性默认会获取所在方向上（水平或者垂直）所有的剩余空间，元素的宽度高度是指定的宽度高度或者由子元素决定
- 当上下两个属性指定的属性值之和大于相对的父元素时，其高度为0，对其宽度也有同样的结论