CSS定位
Posted 做个机灵鬼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS定位相关的知识，希望对你有一定的参考价值。
定位的分类
1.静态定位(static)
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。
2.绝对定位(absoulte)
一般与祖类元素搭配使用，不占用原来的空间(脱标)，以最靠近它的祖类元素为参照单位
3.相对定位(relative)
相对于原来自己的位置发生偏移，如果只给relative不加偏移盒子不会移动，相对定位发生偏移时原先的位置仍然占有(不脱标)，一般出现为搭配绝对定位使用
4.固定定位(fixed)
固定定位是固定元素可视区的位置，主要使用场景：可以在浏览器滚动页面是元素固定不变。任何父类元素无关，不随滚动条滚动，固定位置不占用原理的位置(脱标)
子绝父相
案例
<!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>定位案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.promo {
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
}
.promo img {
width: 520px;
height: 280px;
}
/* 并集选择器 */
.prev,
.next {
position: absolute;
/* 绝对定位盒子居中 */
top: 50%;
margin-top: -15px;
/* 加了绝对定位的盒子可以直接设置高和宽 */
width: 20px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
text-decoration: none;
}
li {
list-style: none;
}
.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;
}
.nav {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: aqua;
background: rgba(255, 255, 255, 0.3);
border-radius: 7px;
}
.nav li {
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 3px;
background-color: #fff;
}
.nav .color {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="promo">
<img src="imagess/tb.jpg" alt="" />
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<ul class="nav">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
小提示：清除外边距和内边距，盒子是加背景颜色，标签加了类名直接使用类名
以上是关于CSS定位的主要内容，如果未能解决你的问题，请参考以下文章