开发者学堂课程【CSS 快速掌握：固定定位】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9200
固定定位
内容介绍
一、Position 简介
二、使用语法
三、范例展示
一、Position 简介
position 在英文中表示“位置”的意思它主要是用于实现对玩元素的定位,在 CSS 中定位分为三种:
position:fixed 固定定位
position:relative 相对定位,
position:absolute 绝对定位
注意:
在使用定位属性时,一定要配合定位的坐标来使用!。
left: 表示定位的元素离左边多远
right: 表示定位的元素离右边多远。
top: 表示定位的元素离上边多远。
bottom: 表示定位的元素离下边多远
二、使用语法
语法:v
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变!v
特点:
l 固定定位元素它脱离了标准文档流
l 固定定位元素的的层级比标准文档流里面的元素要高所以固定定位元素它会压盖住标准文档流里面的元素
l 固定定位元素它不再占用空间。
l 固定定位元素它显示的位置不会随着浏览器滚动而滚动
三、范例展示
案例1:使用固定定位来实现返回顶部的按钮"
<meta charset="UTF-8">
<title>使用固定定位来实现返回顶部的按钮</title><style type="/title">
*{
margin:;padding:0;
}
ai
width: 60px;height: 60px;
/*将行内元素转换为块级元素*/display: block;
I
background-color: #ccc;
text-align: center;
line-height: 30px;
text-decoration: none;color: white;
font-weight: bold;/*使用固定定位*/position: fixed;
right: 30px;/*离右边30px*/
bottom: 100px;/*离下边100像素*/
案例2使用固定定位来实现顶部的导航栏
图中的代码如下：
<style>
*{
margin:0;padding:0;
}
.nav{
width: 100%;height:60px;
background-color: #222222;/*使用固定定位*/
position: fixed;left: Opx;
top: Opx;
}
.nav .inner_c{
width: 1000px;height: 60px;
margin: 0px auto;
}
ul{
list-style: none;
}
图中的代码如下：
<style>
*{
margin:0;padding:0;
}
.nav{
width: 100%;height:60px;
background-color: #222222;/*使用固定定位*/
position: fixed;left: Opx;
top: Opx;
}
.nav .inner_c{
width: 1000px;height: 60px;
margin: 0px auto;
}
ul{
list-style: none;
}
图中的代码如下：
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="#">网站栏目</a></li>
<li>a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li>a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li>a href="#">网站栏目</a></li>
<li><a href="#“>网站栏目</a></li>
<li><a href="#">网站栏目</a></li></ul>
</div></div>
<img src="./images/2.jpg"><img src="./images/2.jpg"><img src="./images/2.jpg "><img src="./images/2.jpg"><img src="./images/2.jpg"></body>