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>
