文章目录
- 定位
- 为什么要使用定位
- 定位的组成
- 定位模式
- 静态定位：按照标准流特性摆放，没有边偏移
- 相对定位：元素在移动位置的时候，是相对于它原来的位置来说的
- 绝对定位：在移动位置的时候相对与祖先元素
- 固定定位：元素固定于浏览器可视区的位置。浏览器随页面滚动时元素的位置不会改变
- 粘性定位：相对定位和固定定位的混合
- 子绝父相
- 边偏移
- 定位的叠放次序z-index（z轴）
- 定位的特殊特性
- demo（轮播图）
定位
为什么要使用定位
- 某个元素可以在一个盒子内移动位置，并压住其他盒子
- 滚动窗口时，盒子固定在屏幕
定位的组成
定位：将盒子定在一个位置，所有定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。
定位模式
position:static | relative | absolute | fixed | sticky
默认：静态定位 |相对定位 | 绝对定位 | 固定定位 | 粘性定位
静态定位：按照标准流特性摆放，没有边偏移
相对定位：元素在移动位置的时候，是相对于它原来的位置来说的
- 相对于原来的位置移动
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
因此，相对定位没有脱标，它最典型的应用就是给绝对定位当爹
绝对定位：在移动位置的时候相对与祖先元素
- 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位，则会依据最近一级祖先元素为参考移动
- 脱标（比浮动飘的高）
居中算法：加了==绝对定位的盒子不能通过margin:0 auto;==水平居中
- 让绝对定位的盒子left:50%，走到父盒子的一半；
- margin负值，往回走盒子宽度的一半。
垂直居中同理
固定定位：元素固定于浏览器可视区的位置。浏览器随页面滚动时元素的位置不会改变
- 以浏览器可视窗口为参照
- 跟父元素没有任何关系
- 不随滚动条滚动
- 脱标
**固定定位小技巧：**固定到版心右侧
- 让固定定位的盒子left:50%,走到浏览器可视区即版心的一半；
- 让固定的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置。
粘性定位：相对定位和固定定位的混合
- 以浏览器可视窗口为参照移动（固定定位）
- 占有原先位置（相对定位）
- 必须添加top、left、right、bottom
例如：将页面滚动到一定的位置后元素变为固定定位效果（IE）
子绝父相
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
- 父盒子加相对定位，占有位置
边偏移
定位的盒子移动的最终位置、有top、bottom、left、right属性
如果一个盒子同时又四个属性，执行先左后右，先上后下
| 定位模式 | 是否脱标 | 移动位置 |
|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 |
| relative相对定位 | 否 | 相对于自身位置偏移 |
| absolute绝对定位 | 是 | 带有定位的父级 |
| fixed固定定位 | 是 | 浏览器可视区 |
| sticky粘性定位 | 否 | 浏览器可视区 |
定位的叠放次序z-index（z轴）
- 数值可以是正整数、负整数、0，越大越靠上
- 属性值相同则后来者居上
- 数字后不能加单位
- 只有定位的盒子才有z-index属性
定位的特殊特性
与浮动类似
- 行内元素添加绝对或固定定位，可以直接设置宽度和高度
- 块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小
- 脱标都不会触发边距塌陷
与浮动不同
- 绝对定位和固定定位会压住下面的文字和内容
demo（轮播图）
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
}
.tb-promo img {
width: 520px;
height: 280px;
}
/*并集选择器可以集体声明相同样式*/
.prev,
.next {
position: absolute;
/*绝对定位盒子垂直居中*/
top: 50%;
margin-top: -15px;
/*绝对定位可以直接设置宽度和高度*/
width: 20px;
height: 30px;
background: rgba(0, 0, 0, 0.3);
text-decoration: none;
text-align: center;
line-height: 30px;
color: #fff;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255, 255, 255, 0.3);
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
.promo-nav .select {
background-color: #ff5000;
}
<div class="tb-promo">
<img src="image/tb.jpg" alt="">
<!--左侧按钮-->
<a href="#" class="prev"><</a>
<!--右侧按钮-->
<a href="#" class="next">></a>
<!--圆点-->
<ul class="promo-nav">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
