使用CSS和HTML固定定位元素

一、什么是固定定位

在网页设计中，固定定位是一种特殊的定位方式，指的是在浏览器窗口中始终保持该元素的位置不变。也就是说，不论浏览器滚动条如何移动，该元素都会呈现在指定的位置。这种定位方式通常用于固定导航栏、侧边栏等需要经常出现在用户视线中的元素。

HTML 5中新增了一个fixed定位，需要注意的是fixed定位相对于整个窗口进行定位，当用户滚动窗口时，元素也会随之滚动。

二、如何实现固定定位

在HTML中添加我们需要进行固定定位的元素，在CSS样式表中选择这个元素，将其进行固定定位的设置即可。

固定定位设置：
position: fixed;
top: 0;
left: 0;

上述代码片段中，position为fixed表示该元素是以固定定位方式进行布局的，top和left分别表示元素距离浏览器窗口的上边框和左边框的距离。

如果我们需要在元素的基础上增加一定的距离，可以通过margin属性实现。如下所示：

距离设置：
margin-top: 10px;
margin-left: 20px;

三、固定定位的应用

1、固定导航栏

在网页设计中，导航栏是一种非常常见的元素。通过固定定位，我们可以使得导航栏始终呈现在用户的视线中，方便用户进行页面的导航。

下面给出一个例子：

HTML代码：
<nav>
   <a href="#">首页</a>
   <a href="#">产品</a>
   <a href="#">服务</a>
   <a href="#">关于我们</a>
</nav>

CSS代码：
nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: #333;
   color: #fff;
   text-align: center;
   line-height: 50px;
}
nav a {
   display: inline-block;
   margin: 0 10px;
   color: #fff;
}

2、固定侧边栏

除了导航栏外，侧边栏也是一种常见的固定元素。通过固定定位，我们可以让该元素一直保持在页面的侧边，并且不会随着浏览器的滚动而改变位置。

下面给出一个例子：

HTML代码：
<div id="sidebar">
   <a href="#">导航1</a>
   <a href="#">导航2</a>
   <a href="#">导航3</a>
</div>

CSS代码：
#sidebar {
   position: fixed;
   top: 50%;
   left: 0;
   width: 100px;
   background-color: #333;
   transform: translateY(-50%);
   text-align: center;
   color: #fff;
}
#sidebar a {
   display: block;
   padding: 10px;
   color: #fff;
}

上述代码中，我们通过设置固定定位，将侧边栏固定在了页面的左侧。通过transform的translateY()函数，可以将该元素向上平移了50%的距离，达到了居中的效果。

3、固定广告条

在网页设计中，广告条是一种常见的元素。我们可以通过固定定位来让该元素始终呈现在页面的某个位置，从而获取更好的广告展示效果。

下面给出一个例子：

HTML代码：
<div id="ad">
   <a href="#"><img src="ad.jpg"></a>
</div>

CSS代码：
#ad {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 200px;
   height: 200px;
}
#ad img {
   width: 100%;
   height: 100%;
}

上述代码中，我们通过设置固定定位，将广告条固定在了页面的右下角。通过设置width和height为100%，可以使得图片始终充满整个广告条。