css最重要的功能: 元素样式, 布局

CSS定位　static、relative、absolute、fixed、sticky

文档流: 显示顺序与书写顺序一致简言之就是我们平时写文档的方式，即窗体自上到下，从左到右的排列方式。

静态定位: static
- 完全由浏览器来控制(根据元素在html文档中的顺序) ,元素出现在正常的文档流中。即没有定位
- 静态定位的元素不会受到top, bottom, left, right影响。
- 一旦某一个元素使用了非static的定位属性,那么它就转换成了”定位元素”

相对定位: relative
- 相对于它在文档流中的原始位置进行了偏移,它原来占据的空间并不释放
- 相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
- 不会改变其他元素的布局，会在此元素本来位置留下空白。

绝对定位: absolute
- 相对于离它最近的”定位元素”进行偏移,如果没有,就一直向上,直到最初包含块(html,body)
- 会脱离文档流原来的位置会被别的元素占据
固定定位: fixed
- 元素被固定不会随着滚动条的拖动而改变位置。
- 被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。
- 如果一个元素总是相对于html/包含块定位,那么它就是一个固定定位元素
- 固定定位,其实是绝对定位的一个特例,它是相对一个固定的参照物(根元素)

粘性定位: sticky
- 相当于相对定位+固定定位的二合一

定位实战:模态框

<body>
  <header>
    <h2>猪老湿的博客</h2>
    <button onclick="document.querySelector('.modal').style.display='block'">登录</button>
  </header>
  <div class="modal">
    <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
    <form action="" class="modal-form">
      <fieldset style="display: grid; gap: 1em">
        <legend>用户登录</legend>
        <input type="email" name="email" placeholder="user@email.com" />
        <input type="password" name="password" placeholder="不少于6位" />
        <button>登录</button>
      </fieldset>
    </form>
  </div>
  <style>
/* 页面内容初始化 */
    *{margin: 0;padding: 0;box-sizing: border-box;}
    body{background-color: #eee;}
    header{background-color: aqua;padding: 0.5em 1em;display: flex;}
    header button{margin-left: auto;width: 5em;}
    .modal{position: relative;}
    .modal .modal-form fieldset{
      background-color: lightblue;
      border: none; padding: 2em;box-shadow: 0 0 5px #888;
    }
    .modal .modal-form fieldset legend{
      padding: 5px 1em;background-color: rebeccapurple;color: white;
    }
    .modal .modal-form{position: fixed;top: 10em;left: 20em;right: 20em;}
    .modal .modal-bg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgb(0, 0, 0, 0.5);}
   /* .modal{display: none;} */
  </style>
</body>