在网页中会有一些样式需要用到固定定位，对于它的使用，我们来作以练习。
一、介绍
固定定位的标签语句为：position：fixed；
和其他定位方法一样，都是需要先在父级元素进行相对定位，然后才能定位到想要定位的地方。
配合使用图层级数来使定位显示的效果更好，图层级数：z-index：n；
还有一些小技巧：
溢出省略号：
overflow:hidden;
text-overflow:eclipse;
white-space:nowarp;
::before /::after
{
content:"";}
linear-gradient(270deg,red,yellow,green,pink) 线性渐变
下面是实践的例子：
二、例子
代码部分：
html部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/commen.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/font/iconfont.css"/>
</head>
<body>
<!--头部广告-->
<div id="top-adv">
<div class="top-adv">
<a href=""><img src="images/top-0.jpg" alt=""/></a>
<a href="" class="one"><img src="images/top-1.webp" alt=""/></a>
<a href="" class="one"><img src="images/top-2.webp" alt=""/></a>
<span class="iconfont icon-guanbi"></span>
</div>
</div>
<!--头部导航-->
<div id="top">
<div class="top">
<div class="top-left fl">
<span class="iconfont icon-dingwei red"></span>
<a href="">陕西</a>
<div>
<dl>
<dd>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="" class="active">陕西</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="">钓鱼岛</a>
<a href="">上海</a>
<a href="">上海</a>
</dd>
<dt>地区专享版本</dt>
<dd> <a href="">中国港澳</a>
</dd>
<dt>Available Sites</dt>
<dd>
<a href=""><i class="i1"></i>Global Site</a>
<a href=""><i class="i2"></i>Сайт России</a>
<a href=""><i class="i3"></i>Situs Indonesia</a>
<a href=""><i class="i4"></i>Sitio de España</a>
<a href=""><i class="i5"></i>เว็บไซต์ประเทศไทย</a>
</dd>
</dl>
</div>
</div>
<div class="top-right fr">
<ul>
<li><a href="">您好，请登录</a> <a href="" class="red">免费注册</a></li>
<li>|</li>
<li><a href="">我的订单</a></li>
<li>|</li>
<li class="active"><a href="">我的京东</a><span class="iconfont icon-xiangxia"></span>
<div class="myjd">
<dl>
<dd><table>
<tr>
<td><a href="">待处理订单</a></td>
<td><a href="">消息</a></td>
</tr>
<tr>
<td><a href="">返修退换货</a></td>
<td><a href="">我的回答</a></td>
</tr>
<tr>
<td><a href="">降价商品</a></td>
<td><a href="">我的关注</a></td>
</tr>
</table>
</dd>
</dl>
<dl>
<dd>
<table>
<tr>
<td><a href="">我的京豆</a></td>
<td><a href="">我的优惠券</a></td>
</tr>
<tr>
<td><a href="">我的白条</a></td>
<td><a href="">我的理财</a></td>
</tr>
</table>
</dd>
</dl>
</div>
</li>
<li>|</li>
<li><a href="">京东会员</a></li>
<li>|</li>
<li class="active"><a href="" class="red">企业采购</a><span class="iconfont icon-xiangxia"></span>
<div class="qycg">
<dl>
<dd>
<a href="">企业购</a>
<a href="">商用场景管</a>
<a href="">工业品</a>
<a href="">礼品卡</a>
</dd>
</dl>
</div>
</li>
<li>|</li>
<li class="active"><a href="">客户服务</a><span class="iconfont icon-xiangxia"></span>
<div class="khfw">
<dl>
<dt>客户</dt>
<dd><table>
<tr>
<td><a href="">帮助中心</a></td>
<td><a href="">售后服务</a></td>
</tr>
<tr>
<td><a href="">在线客服</a></td>
<td><a href="">意见建议</a></td>
</tr>
<tr>
<td><a href="">电话客服</a></td>
<td><a href="">客服邮箱</a></td>
</tr>
<tr>
<td><a href="">金融咨询</a></td>
<td><a href="">全球售客服</a></td>
</tr>
</table></dd>
<dt class="khfw2">商户</dt>
<dd><table>
<tr>
<td><a href="">合作招商</a></td>
<td><a href="">成长中心</a></td>
</tr>
<tr>
<td><a href="">商家后台</a></td>
<td><a href="">京麦工作台</a></td>
</tr>
<tr>
<td><a href="">商家帮助</a></td>
<td><a href="">工作平台</a></td>
</tr>
</table></dd>
</dl>
</div>
</li>
<li>|</li>
<li class="active two"><a href="">网站导航</a><span class="iconfont icon-xiangxia"></span>
<div class="wzdh">
<div>
<dl>
<dt class="wzdh11">特色主题</dt>
<dd class="wzdh1"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
<div>
<dl>
<dt>特色主题</dt>
<dd class="wzdh2"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
<div>
<dl>
<dt>特色主题</dt>
<dd class="wzdh3"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
