position:absolute和position:fixed元素位置和宽度高度的问题

时间 2020-02-05 标签 position absolute fixed 元素位置宽度高度问题

绝对定位或者固定定位的元素能够用left、right、top、bottom四个属性指定，那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢？css

left、right、top、bottom四个属性所有指定

代码以下：
html和csshtml

<!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>

结果以下图：

能够看到元素的上下左右边界所处的位置分别由四个属性指定，宽度和高度是父元素的宽度和高度减去四个属性。web

只指定right、top、bottom

main {
      position: fixed;
    
      right: 100px;
      top: 100px;
      bottom: 100px;
      background-color: gray;
    }

获得的效果以下图：

咱们能够发现，元素的宽度是100px，也就是左边的全部剩余空间都被分配到了left上，咱们能够假定这是left的默认值。svg

结论

当上下左右四个属性都指定了的时候，元素的宽度和高度由定位相对的元素的宽度和高度以及上下左右四个属性所决定
当上下左右某个属性未指定的时候，该属性默认会获取所在方向上（水平或者垂直）全部的剩余空间，元素的宽度高度是指定的宽度高度或者由子元素决定
当上下两个属性指定的属性值之和大于相对的父元素时，其高度为0，对其宽度也有一样的结论