持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天
一、定位类型值
static 相当于元素没有加定位效果，如果元素加了定位，后面需要去掉，可以添加 position: static;
| 属性值 | 描述 |
|---|---|
| static | 没有定位，元素出现在正常的流中（默认值，可以忽略） |
| relative | 相对定位,相对于自身正常位置进行位置的调整 |
| absolute | 绝对定位,相对于其最近的定位的父元素定位，进行位置调整 |
| fixed | 固定定位, 相对于浏览器窗口进行位置调整 |
| fixed | 粘性定位, 是基于用户的滚动位置来定位 |
二、相对定位
- 给需要添加相对定位的元素，加上
position: relative; - 元素的位置通过（位置描述词）：
"left","top","right","bottom"属性进行调整位置 - 属性值可以是正数，也可以是负数
| 定位的位置属性 | 描述 |
|---|---|
| top | 向下移动 |
| bottom | 向上移动 |
| left | 向右移动 |
| right | 向左移动 |
三、相对定位应用场景
3-1. 鼠标滑动到元素，元素少量位置偏移动画
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
width: 480px;
margin: 150px auto;
}
ul li {
width: 100px;
height: 120px;
background-color: pink;
margin: 0px 10px;
float: left;
}
/*
鼠标滑动到li上，li设置为相对定位
然后相对自身向上偏移10px
向右偏移2px
*/
ul li:hover {
position: relative;
top: -10px;
left: 2px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
3-2. 网站导航
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #fff;
}
ul {
height: 50px;
margin-top: 50px;
list-style: none;
background-color: skyblue;
}
ul li {
float: left;
line-height: 50px;
}
ul li a {
display: inline-block;
padding: 0px 20px;
height: 50px;
}
ul li a:hover {
/* 相对定位，用来微调元素的位置 */
position: relative;
top: -5px;
height: 60px;
line-height: 60px;
background-color: rgb(24, 181, 243);
}
</style>
<body>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">免费直播课</a></li>
<li><a href="#">web前端工程师</a></li>
<li><a href="#">Java架构师</a></li>
<li><a href="#">实战案例视频</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
3-3. 导航（鼠标划过带下划线）
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 1200px;
height: 40px;
margin: 100px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
}
nav ul li a {
font-size: 16px;
text-decoration: none;
background-color: #e8e7e3;
display: block;
color: #777;
}
nav ul li a:hover {
border-bottom: 3px solid gold;
background-color: #3f3f3f;
color: #fff;
/* 相对定位，用来微调元素的位置 */
position: relative;
bottom: 0px;
}
</style>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">HTML标签</a></li>
<li><a href="#">CSS样式</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">NodeJs</a></li>
<li><a href="#">Vue</a></li>
<li><a href="#">Koa</a></li>
<li><a href="#">React</a></li>
<li><a href="#">ElementUI</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</body>
3-4. 水平进度条
<style>
.order-progress {
text-align: center;
}
ul {
/* border: 1px solid red; */
font-size: 0;
list-style: none;
display: inline-block;
}
ul li {
/* 右浮动实现元素从右往左开始排列 */
float: right;
}
ul li:nth-child(even) {
width: 150px;
border-top: 2px dashed #ddd;
/* 通过相对定位来微调线条位置，实现线条与圆垂直居中对齐 */
position: relative;
top: 24px;
}
ul li:nth-child(odd) {
background-color: #ddd;
width: 50px;
height: 50px;
font-size: 16px;
margin: 0px 5px;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
/* 当前进度 */
ul li.current {
background-color: skyblue;
color: #fff;
}
/* 当前进度前面的元素偶数项样式 */
ul li.current ~ li:nth-child(odd) {
background-color: skyblue;
color: #fff;
}
/* 当前进度前面的元素奇数项样式 */
ul li.current ~ li:nth-child(even) {
border-color: skyblue;
}
</style>
<body>
<div class="order-progress">
<ul>
<li>5</li>
<li></li>
<li>4</li>
<li></li>
<li class="current">3</li>
<li></li>
<li>2</li>
<li></li>
<li>1</li>
</ul>
</div>
</body>
