系列文章目录
Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（四）之display 和 float. Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白. Web前端 学习知识点总结（六）定位position. Web前端 学习知识点总结（七）Css3动画animation. Web前端 学习知识点总结（八）JavaScript的常用基础. Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础. Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器. Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作. Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式. Web前端 学习知识点总结（十三）学生管理系统案例.
文章目录
系列文章目录前言一、页面中三种定位机制1.标准文档流2.浮动float和display：inline-block3.定位
二、定位1.static2.fixed吸顶效果案例
3.relative4.position亚马逊案例
前言
定位来解决标准文档流和浮动无法解决的页面指定位置布局的问题。
一、页面中三种定位机制
1.标准文档流
Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
2.浮动float和display：inline-block
Web前端 学习知识点总结（四）之display 和 float. 但是无法实现以下效果：
图片右上角按钮；吸顶栏；鼠标移动后下拉菜单。
3.定位
主要使用的position属性来调整位置。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
二、定位
1.static
反映的就是标准文档流的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 30px;
background-color: red;
}
section{
border: 1px solid green;
position: static;
}
</style>
</head>
<body>
<div>
<section>文字
</section>
</div>
</body>
</html>
2.fixed
可以用于吸顶效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
postion:fixed;
left:20px;
top:20px
</style>
</head>
<body>
</body>
</html>
吸顶效果案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 60px;
background-color: gray;
position: fixed;
left: 0;
top: 0;
}
section{
height: 1000px;
background-color: burlywood;
margin-top:60px;
}
</style>
</head>
<body>
<header>吸顶
</header>
<section>内容
</section>
</body>
</html>
3.relative
相对于自己原来位置的偏移量 。 position:relavtive;
leftbottomright
偏移后：层次提高了，然后会产生留白。 当多个元素层级提高的时候，后面的会压住前面的元素。 一般与position一起使用。
4.position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
section{
position: absolute;
left: 20px;
top: 20px;
background: navy;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div>
<section>x
</section>
<span>今天是个好日子
</span>
</div>
</body>
</html>
亚马逊案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
header #top{
border-bottom: 1px solid gray;
background-color:white ;
width: 1890px;
height: 80px;
margin: 0 auto;
line-height:35px;
position: fixed;
left: 0;
top: 0;
}
header #top img{
height: 30px;
float: left;
padding: 30px 175px;
}
header #top nav{
float: left;
}
header nav li{
width: 100px;
margin: 24px 10px;
list-style: none;
float:left;
text-align: center;
}
header nav li h3{
font-size: 16px;
padding-bottom: 18px;
}
header nav li div{
background-color: white;
border: 1px solid gray;
display: none;
width: 100px;
text-align: center;
}
header nav li div p{
font-size: 13px;
padding: 0px 10px 10px 10px;
}
header nav li:hover div{
display: block;
border-bottom-right-radius:10px ;
border-bottom-left-radius:10px ;
}
header nav li:hover h3{
border-bottom:3px solid dodgerblue ;
}
#one{
width: 1535px;
margin: 0 auto;
margin-top: 80px;
}
#one div img{
width: 100%;
}
#return a{
background-color:#0079AF;
color: white;
text-decoration: none;
display: inline-block;
width: 80px;
text-align: center;
line-height: 40px;
border-radius: 30px;
font-weight: bold;
position: fixed;
right: 60px;
bottom: 40px;
}
</style>
</head>
<body>
<header>
<div id="top" class="clear">
<img src="img/amazonglobalSmall._CB1198675319_.svg" />
<nav>
<ul>
<li>
<h3>全球开店
</h3>
<div class="attribute">
<p>中国
</p>
<p>北美
</p>
<p>南美
</p>
</div>
</li>
<li>
<h3>项目招聘
</h3>
<div class="attribute">
<p>注册
</p>
<p>登录
</p>
<p>取消
</p>
</div>
</li>
<li>
<h3>项目招聘
</h3>
<div class="attribute">
<p>注册
</p>
<p>登录
</p>
<p>取消
</p>
</div>
</li>
<li>
<h3>学习中心
</h3>
<div class="attribute">
<p>官网直播
</p>
<p>官方讲堂课程表
</p>
<p>自助开店
</p>
<p>卖家成功故事
</p>
</div>
</li>
<li>
<h3>生意参谋
</h3>
<div class="attribute">
<p>官网直播
</p>
<p>官方讲堂课程表
</p>
<p>自助开店
</p>
<p>卖家成功故事
</p>
</div>
</li>
<li>
<h3>登录
</h3>
<div class="attribute">
<p>官网直播
</p>
<p>官方讲堂课程表
</p>
<p>自助开店
</p>
<p>卖家成功故事
</p>
</div>
</li>
<li>
<h3>立即注册
</h3>
<div class="attribute">
<p>官网直播
</p>
<p>官方讲堂课程表
</p>
<p>自助开店
</p>
<p>卖家成功故事
</p>
</div>
</li>
</ul>
</nav>
</div>
</header>
<section id="one">
<div>
<img src="img/Amazon.png" />
<img src="img/amazon1.png" />
</div>
</section>
<section id="return">
<a href="#">反馈
</a>
</section>
</body>
</html>
页面效果：
