定位
1、定位组成
定位=定位模式+边偏移
1.定位模式决定元素的定位方式，通过css的positon属性来设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
2.边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:88px | 顶端偏移量定义元素相对于其父元素上边框的距离 |
| bottom | bottom:80px | 顶端偏移量定义元素相对于其父元素上边框的距离 |
| left | left:80px | 顶端偏移量定义元素相对于其父元素上边框的距离 |
| right | right:80px | 顶端偏移量定义元素相对于其父元素上边框的距离 |
相对定位
相对于原来的位置来移动
不脱标，继续保留原来的位置
绝对定位
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位.
如果祖先元素有定位(相对、绝对、固定定位),则以最近以及的有定位祖先元素为参考点移动位置。
子绝父相
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
固定定位
- 以浏览器的可视窗口为参照点移动元素，
跟父元素没有任何关系
不随滚动条移动
固定定位不占用原先的位置
固定定位是脱标的，其实固定定位可以看做是一种特殊的绝对定位
固定定位小技巧
让固定定位的盒子left:50%,走到浏览器可视区 版心的一半位置
让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半距离就可以让固定定位的盒子贴着版心右侧对齐了
粘性定位sticky
{position:sticky;top:10px;}粘性特点：
以浏览器的可视窗口为参照点移动元素
粘性定位占有原先的位置
必须添加top、left、right、bottom其中一个才有效
3.定位小结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
| absolute | 是(不占用位置) | 带有定位的父级 | 常用 |
| fixed固定定位 | 是(不占用位置) | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
2、定位叠放次序z-index
数值可以是正整数、负整数、0，默认是auto，数值越大盒子越靠上，
如果属性相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性
绝对定位的盒子居中算法
加了绝对定位的盒子不能通过margin0 atuo水平居中，可以通过left:50%;
让盒子的左侧移动到父级元素的水平中心位置
margin-left:100px 让盒子向左移动自身宽度的一半
定位特殊特性
行内元素添加绝对或固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或高度，默认大小是内容的大小
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位元素的都不后悔触发外边距合并的问题
/* 1.浮动的元素不会压住下面标准流的文字 */
/* float: left; */
/* 2. 绝对定位（固定定位） 会压住下面标准流所有的内容。 */
position: absolute;
1.水平居中 绝对定位的盒子居中算法
left:50%;margin-left:width/2 ;
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
border-radius: 7px;
background: rgba(255, 255, 255, .3);
}
2.垂直居中
top为50% margin-top:height/2 ;
.prev,
.next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
line-height: 30px;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, .3);
}
3、网页布局总结
1、标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
2、浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3、定位
定位最大的特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素*的在某个盒子内移动就用定位布局
4、元素的显示与隐藏
本质： 让一个元素在页面中隐藏或者显示出来
display：none 隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后不再占有原来的位置
visibility 属性用于指定一个元素应可见还是隐藏
visibility:visible;元素可视
visibility:hidden;元素隐藏
visibility:隐藏元素后，继续占有原来的位置
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
/* overflow: scroll; */
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
/* overflow: auto; */
1.土豆网显示隐藏遮罩实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: plum;
margin: 30px auto;
}
.tudou img {
width: 444px;
height: 320px;
}
.mask {
display: none;
/* 绝对定位不占位置 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 不重复 居中 */
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
.tudou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/pic02.png" alt="">
</div>
</body>
</html>