系列文章目录
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.标准文档流
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;
/*static是默认设置,说明没有进行定位*/
position: static;
}
</style>
</head>
<body>
<div>
<section>文字</section>
</div>
</body>
</html>
2.fixed
可以用于吸顶效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*fixed 固定定位
定位元素会压在后来元素之上，不随滚动条滚动*/
/*通过left right top bottom 来调整位置和距离*/
/*往往会搭配偏移量*/
/*调整被覆盖的内容*/
/*margin:top 或者 margin:bottom 调整被盖住的内容*/
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 和 top 不然会无法定位 给初始位置*/
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;
- left
- bottom
- right
偏移后：层次提高了，然后会产生留白。
当多个元素层级提高的时候，后面的会压住前面的元素。
一般与position一起使用。
4.position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
/*如果没有relative,会相对于浏览器*/
position: relative;
}
section{
/*绝对定位*/
/*脱离了标准文档流,后面元素顶上来了 会有层压层的效果 一般最后去设置*/
/*与positon:fixed区别*/
/*absolute相对于浏览器在偏移
找的是最近发生定位的父控件 如果没有就相对于浏览器偏移
发生定位：postion fixed relative absolute
子元素设置absolute 父元素一般设置为relative*/
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>
页面效果：
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
