定位
同浮动一样，定位的目的或定位的价值是为了更好的摆放盒子，更好的实现网页布局。
浮动更多的实现一行多个盒子并排布局，而定位可以任意摆放盒子的位置。
案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss
其它Web文章
Html+Css基础学习第一章
CSS基础学习之第二章
CSS浮动的使用和解决浮动的五种方法
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......
本编文章会讲到的知识点
- 定位的属性
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 改变元素的显示模式
- 子绝父相
- 叠放次序
- 元素的显示和隐藏
- 定位总结
定位的属性
定位的属性分为边偏移 和 定位的方式。
针对定位，定位的方式 要和 边偏移移配合使用。
定位方式：
| 方式 | 作用 |
|---|---|
| position:static;元素在标准文档流中默认的 | 静态定位，所有元素默认定位。 |
| postion:relative; | 相对定位 |
| postion:absolute; | 绝对定位 |
| position:fixed; | 固定定位 |
边偏移：
| 属性 | 作用 | 示例 |
|---|---|---|
| top | 以顶部为基准调控位置 | top:10px; top:-10px; |
| left | 以左侧为基准调控位置 | left:10px; left:-10px; |
| right | 以右侧为基准调控位置 | right:10px; right:-10px; |
| bottom | 以底部为基准调控位置 | bottom:10px; bottom:-10px; |
静态定位
什么是静态定位
position:static;
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。
静态定位的特性
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
相对定位
什么是相对定位
positon:relative;
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
相对定位的特性
相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有，没有脱离标准文档流。
每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置。 自恋型）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background: gold;
}
.two {
width: 300px;
height: 300px;
/*
相对定位：
特点：
→可以使用边偏移
→没有脱离标准文档流
→位置调控时（使用边偏移），参考的自身起初原有的位置。 （自恋型）
→ 不会改变元素的显示模式
*/
position: relative;
top: 50px;
left: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>
绝对定位
什么是绝对定位
position:absolute;
脱离标准文档流的定位，可以通过边偏移属性调控位置。
绝对定位的特性
- 脱离标准文档流。
- 可以使用边偏移样式属性控制位置。
- 拼爹型，总是以其父或祖先先中最近的定位(relative、absolute、fixed)元素为参考。如果其父或祖先先中没有定位，就以body元素为参考。
- 会改变元素的显示模式，变为行内块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background: gold;
border: 1px solid red;
}
.two{
position: absolute;
width: 200px;
height: 200px;
background: blue;
top: 50px;
left: 50px;;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>
固定定位
什么固定定位
position:fixed
以浏览器为参考，脱离标准文档流，可用边偏移属性控制位置
固定定位的特性
- 脱离标准文档流。
- 可用边偏移属性控制位置。
- 调控位置时，永远以浏览器为参考。（固执型）
- 会改变元素的显示模式，变为行内块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 50px;
}
.div-fix{
width: 200px;
height: 200px;
background: gray;
position: fixed;
right: 10px;
top: 300px;
}
</style>
</head>
<body>
<div class="div-fix"></div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
<div>德玛西亚</div>
</body>
</html>
改变元素的显示模式
上面我们已经说过绝对定位和固定定位都会改变元素的显示模式，模式变为行内块元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span{
/* 绝对定位和固定定位会改变元素的显示模式 */
/* position: absolute; */
position:fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
background: red;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
子绝父相
对于绝对定位和相对定位，在实际开发中，哪个应用最多？
一起配合使用最多！子绝父相（子元素绝对定位，父元素相对定位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 子绝父相 */
div{
width: 300px;
height: 300px;
background: gray;
position: relative;
}
span{
position:absolute;
width: 100px;
height: 100px;
background: red;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
叠放次序
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
如何设置盒子之间的层叠（叠放顺序）
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素设置CSS的z-index层叠等级属性，其取值可为正整数、负整数和0。比如： z-index: 2;
注意：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
子绝父相
z-index值越大越居上
*/
div{
width: 300px;
height: 300px;
background: gray;
position: relative;
}
.one{
position:absolute;
width: 100px;
height: 100px;
background: red;
top: 50px;
left: 50px;
z-index: 10;
}
.tow{
position:absolute;
width: 100px;
height: 100px;
background: blue;
top: 70px;
left: 70px;
z-index: 8;
}
.three{
position:absolute;
width: 100px;
height: 100px;
background: gold;
top: 90px;
left: 90px;
z-index: 9;
}
</style>
</head>
<body>
<div>
<span class="one"></span>
<span class="tow"></span>
<span class="three"></span>
</div>
</body>
</html>
元素的显示和隐藏
display
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block(inline-block) 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
overflow
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
.one {
background: red;
display: none;
}
.two {
background: blue;
}
.three{
background: gold;
visibility: hidden;
}
.four{
background: gray;
}
.five{
background: green;
overflow: hidden;
}
</style>
</head>
<body>
<!-- display用法 -->
<div class="one"></div>
<div class="two"></div>
<!-- visibility -->
<div class="three"></div>
<div class="four"></div>
<!-- overflow -->
<div class="five">大家好我叫白云，我叫黑土，他是我老公，她是我老母,宋丹丹赵本山小品</div>
</body>
</html>
定位总结：
| 定位模式 | 是否脱标占位置 | 可否使用边偏移 | 移动位置基准 | 可否转换元素显示模式 |
|---|---|---|---|---|
| 静态：static | 不脱标，占位置 | 不可以 | 正常模式 | 不可以 |
| 相对：relative | 不脱标，占位置 | 可以 | 元素自身（自恋型） | 不可以 |
| 绝对：absolute | 脱标，不占位置 | 可以 | 其上最近的并且定位的（relative、absolute、fixed）父元素或祖先元素（拼爹型） | 可以，转换为行内块级元素。 |
| 固定：fixed | 脱标，不占位置 | 可以 | 浏览器（固执型） | 可以，转换为行内块级元素。 |
