精准布局：探索CSS中的盒子固定定位的魅力
一、概念
固定定位使元素相对于浏览器窗口进行定位，无论网页如何滚动，固定定位的元素也会保持在相同的位置，设置固定定位的元素脱离文档流。
二、语法结构
<style>
选择器{/* fixed 固定定位 */
position: fixed;}
</style>与绝对定位、相对定位（可点击查看相关内容）一样，
- 水平位置：left定位元素和定位元素的左边距离，right定位元素和定位元素的右边距离
- 垂直位置：top定位元素和定位元素的上边距离，bottom定位元素和定位元素的下边距离
运行代码如下：
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
margin-bottom: 5px;
}
#div3{
background-color: red;
margin-bottom: 5px;
position: fixed;
left: 208px;
top: 208px;
}
#div5{
background-color: green;
margin-bottom: 5px;
position: fixed;
left: 250px;
top: 250px;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div id="div3">盒子3(固定定位)</div>
<div>盒子4</div>
<div id="div5">盒子5(固定定位)</div>
<div>盒子6</div>
<div>盒子7</div>
<div>盒子8</div>
<div>盒子9</div>
</body>
</html>运行结果如下：
结论：固定定位无非就是把内容固定在那里,滑动页面时也不会动
三、固定定位的实际应用
1. 导航栏
固定定位常用于创建始终可见的导航栏。这样，用户可以在浏览页面时随时访问导航链接，提高用户体验。
2. 侧边栏
固定定位的侧边栏可以提供额外的信息或导航选项，而不会随着页面滚动而消失。
3. 广告
固定定位的广告可以在页面上保持可见，增加广告的曝光率。
四、练习
多动手，从中了解固定定位的奥秘吧！
运行代码如下：
<style>
nav{
width: 1900px;
height: 50px;
background-color:aqua;
margin-bottom: 5px;
}
div{
width: 200px;
height: 200px;
margin-bottom: 5px;
}
#div1{
padding: 5px;
float: left;
}
#div2{
padding: 5px;
float: left;
}
#div3{
padding: 5px;
float: left;
}
#div4{
padding: 5px;
float: left;
}
#section1{
width: 250px;
height: 150px;
background-color: pink;
border: 2px black solid;
position: fixed;
right: 50px;
bottom: 100px;
}
aside{
width: 250px;
height: 250px;
background-color: gray;
float: right;
position: fixed;
top: 200px;
right: 5px;
}
</style>
<body>
<header>
<h1 align="center">xxx公司</h1>
<p align="center">欢迎来到: <ins>计算机部门</ins></p>
<hr> <!-- 水平分割线 -->
<nav>
<ul type="none">
<li id="div1"><a href="#">首页</a></li>
<li id="div2"><a href="#">关于我们</a></li>
<li id="div3"><a href="#">职员风采</a></li>
<li id="div4"><a href="#">联系方式</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>
<br><br><br>
<img src="#" alt="公司标志" width="200" height="200">
<p>想了解更多关于本公司：<a href="#">点击这里</a></p>
</article>
<br>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容，如快速链接、广告等。</p>
<table border="1">
<tr>
<th>岗位</th>
<th>链接</th>
</tr>
<tr>
<td>前端部门</td>
<td><a href="#">部门A详情</a></td>
</tr>
<tr>
<td>后端部门</td>
<td><a href="#">部门B详情</a></td>
</tr>
</table>
</aside>
</section>
<section id="section1">
<h4>联系我们</h4>
<form>
姓名:
<input type="text" id="name" name="name"><br>
邮箱:
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<hr>
<footer>
<p>版权所有 © xxx公司</p>
</footer>
</body>
</html>