7. 定位
为什么使用定位?
- 浮动可以让多个盒子一行没有缝隙排列显示, 经常用在横向排列盒子;
- 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置, 并且可以压住其他盒子.
7.1 定位组成
定位: 将盒子定在某个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子.
定位 = 定位模式 + 边偏移
- 定位模式决定一个元素在文档中的定位方式,
- 边偏移决定该元素的最终位置
定位模式通过CSS的position来设置, 值有四个:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移: 通过top/bottom/left/right分别设置到上下左右的距离
7.2 静态定位 static
position: static静态定位是元素的默认定位方式, 无定位的意思
静态定位按照标准流特性摆放, 没有边偏移
7.3相对定位 relative
position: relative相对定位是指元素在移动位置时是相对于它原来的位置来说的.
移动后不脱标, 继续保留原来位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
}
.box {
height: 1000px;
width: 1000px;
}
.first {
background-color: #111;
/* 设置相对定位后发现,没有脱标,还是占位置的,不像浮动会脱标不占位 */
position: relative;
top: 100px;
left: 100px;
}
.second {
background-color: #333;
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>7.4 绝对定位 absolute
position: absolute;绝对定位是元素在移动位置时, 是相对于祖先元素的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 当没有父元素时, 则根据浏览器文档为准 */
.box {
width: 400px;
height: 400px;
background-color: #333;
/* 设置绝对定位 */
position: absolute;
top: 100px;
right: 0;
}
/* 父元素没设置定位 */
/* .parent {
width: 1400px;
height: 1400px;
background-color: pink;
} */
/* 当父元素没有设置定位时, 则根据浏览器文档为准 */
/* .parent .son {
width: 400px;
height: 400px;
background-color: #333;
position: absolute;
bottom: 100px;
left: 0;
} */
/* 如果爷爷设置了定位 */
.grandparent {
width: 1200px;
height: 1400px;
background-color: pink;
position: absolute;
}
/* 父亲没有定位 */
.grandparent .parent {
width: 800px;
height: 800px;
background-color: #333;
}
/* 那么元素就会以最近一级设置定位的祖先元素为准 */
.grandparent .parent .son {
width: 400px;
height: 400px;
background-color: #fff;
position: absolute;
right: 100px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="parent">
<div class="son"></div>
</div>
<div class="grandparent">
<div class="parent">
<div class="son"></div>
</div>
</div>
</body>
</html>7.5 子绝父相的由来
子级盒子是绝对定位的话, 父级盒子要用相对定位
- 子盒子绝对定位, 不会占有位置, 可以放到父盒子里面的任何一个地方, 不会影响到其他的兄弟盒子;
- 父盒子需要加定位限制子盒子在父盒子内显示;(如果不加的话, 子盒子会一直向上直到找到文档寻找加了定位的祖元素)
- 父盒子布局时需要占有位置, 而占位置的定位刚好是相对定位, 因此父元素只能是相对定位.
简单来说: 子盒子不占位置, 因此是绝对定位; 而父盒子需要占有位置, 因此用相对定位.
7.6 固定定位 fixed
position: fixed
- 以浏览器的可视窗口为参照点进行移动元素;
- 跟父元素没任何关系;
- 随着滚动条滚动;
- 不保留位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/* 手动智造滚动条, 滚动时图片位置不变 */
height: 3000px;
}
.pic {
/* 绝对定位: 以浏览器的可视窗口进行对齐 */
position: fixed;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<img class="pic" src="../resources/images/r_dj.png" alt="">
<!-- 图片会压住文字, 说明图片设置绝对定位后不占位置 -->
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
<p>请尽情吩咐主人,妲己</p>
</body>
</html>固定定位小技巧: 固定在版心右侧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
height: 1200px;
width: 1200px;
margin: 0 auto;
background-color: pink;
}
.fixed {
position: fixed;
height: 150px;
width: 50px;
background-color: #111;
/* 先用定位移动到50%,在用margin-left移动版心一半的距离 */
left: 50%;
margin-left: 600px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="content"></div>
</body>
</html>7.7 粘性定位
position: sticky
粘性定位可以被认为是相对定位和固定定位的混合
- 以浏览器的可视窗口为参照点移动元素(固定定位特点);
- 粘性定位占有原先的位置(相对定位特点);
- 必须添加top/left/right/bottom其中一个才生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 4000px;
}
.sticky {
/* 设置粘性定位 */
position: sticky;
width: 1200px;
height: 150px;
margin: 300px auto;
/* 需设置top/bottom/left/right才生效, 当导航栏距离顶部0像素时会固定在顶部 */
top: 0;
}
</style>
</head>
<body>
<div class="sticky">
导航栏
</div>
</body>
</html>7.8 定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否使用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 是(不占位置) | 相对于带有定位的父级元素移动 | 常用 |
| fixed固定定位 | 是(不占位置) | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 较少 |
