相对定位
- 相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位。
位置描述词
- left 向右移动;right向左移动;top 向下移动;bottom 向上移动。
- 值可以为负数,即往规定方向相反移动。
相对定位的性质
- 相对定位的元素,会在“老家留坑”,本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 100px;
height: 100px;
}
.v1 {
background-color: red;
}
.v2 {
position: relative;
top: 150px;
left: 200px;
background-color: green;
}
.v3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="v1"></div>
<div class="v2"></div>
<div class="v3"></div>
</body>
</html>
相对定位的用途
- 相对定位用来微调元素位置。
- 相对定位的元素,可以当做绝对定位的参考盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 800px;
height: 40px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
width: 100px;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
nav ul li a {
display: block;
width: 100px;
height: 40px;
color: white;
text-decoration: none;
background-color: orange;
}
nav ul li a:hover {
border-top: 3px solid red;
/* 使用相对定位微调a标签选中时的位置,使导航栏更加美观 */
position: relative;
bottom: 3px;
background-color: gold;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
<li><a href="">导航条</a></li>
</ul>
</nav>
</body>
</html>
绝对定位
- 绝对定位:盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置。
位置描述词
- left 到左边的距离;right到右边的距离;top到上边的距离; bottom到下边的距离。
绝对定位脱离标准文档流
- 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对它们进行压盖。
- 脱离标准文档流的方法:浮动、绝对定位、固定定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 100px;
height: 100px;
}
.v1 {
background-color: red;
}
.v2 {
position: absolute;
top: 150px;
left: 200px;
background-color: green;
}
.v3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="v1"></div>
<div class="v2"></div>
<div class="v3"></div>
</body>
</html>
绝对定位的参考盒子
- 绝对定位的盒子并不是永远以浏览器作为基准点。
- 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫作“子绝父相”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.v1 {
width: 500px;
height: 500px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
}
.v2 {
width: 300px;
height: 300px;
margin: 99px auto;
border: 1px solid #000;
}
.v3 {
width: 100px;
height: 100px;
margin: 99px auto;
border: 1px solid #000;
}
p {
width: 50px;
height: 50px;
background-color: gold;
/* 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。 */
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="v1">
<div class="v2">
<div class="v3">
<p></p>
</div>
</div>
</div>
</body>
</html>
绝对定位的盒子垂直居中
- 绝对定位的盒子垂直居中是一个非常实用的技术。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.v1 {
width: 500px;
height: 500px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
}
.v2 {
position: absolute;
width: 300px;
height: 300px;
/* 垂直居中 */
top: 50%;
margin-top: -150px;
/* 同类水平居中 */
left: 50%;
margin-left: -150px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="v1">
<div class="v2">
</div>
</div>
</body>
</html>
堆叠顺序z-index属性
- z-index属性是一个没有单位的正整数,数值大的能够压住数值小的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
.v1 {
position: absolute;
width: 300px;
height: 300px;
background-color: #f0f;
top: 100px;
left: 100px;
/* 不设置z-index默认是后面的盒子会将前面的盒子覆盖*/
/* 这里设置z-index:666大于后面盒子的z-index,所以后面的盒子会被覆盖 */
z-index: 666;
}
.v2 {
position: absolute;
width: 300px;
height: 300px;
background-color: #0f0;
top: 300px;
left: 300px;
z-index: 66;
}
</style>
</head>
<body>
<div class="v1">
</div>
<div class="v2">
</div>
</body>
</html>
绝对定位的用途
- 绝对定位用来制作“压盖”、“遮罩”效果。
- 绝对定位用来结合CSS精灵使用。
- 绝对定位可以结合JS实现动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
div img {
width: 500px;
height: 300px;
}
div .bn {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
text-decoration: none;
border: 1px solid #000;
border-radius: 50%;
background-color: rgba(255, 255, 255, .5);
}
div .bn:hover {
background-color: gold;
}
div .leftbn {
left: 10px;
}
div .rightbn {
right: 10px;
}
div ol {
position: absolute;
bottom: 20px;
right: 20px;
width: 120px;
height: 20px;
list-style: none;
}
div ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: rgba(255, 255, 255, .5);
/* 圆形 */
border-radius: 50%;
}
div ol li.checked {
background-color: gold;
}
</style>
</head>
<body>
<div class="carousel">
<img src="image/yasuo.jpg" alt="">
<a href="#" class="leftbn bn"><</a>
<a href="#" class="rightbn bn">></a>
<ol>
<li></li>
<li class="checked"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
固定定位
- 固定定位:不管页面如何卷动,它永远固定在那里。
- 固定定位只能以页面为参考点,没有子固父相这个性质。
- 固定定位脱离标准文档流。
- 固定定位的用途:“返回顶部”、“楼层导航”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: fixed;
width: 100px;
height: 100px;
bottom: 50px;
right: 50px;
background-color: #aff;
}
</style>
</head>
<body>
<img src="image/xiaowu.jpg" alt="">
<img src="image/xiaowu.jpg" alt="">
<img src="image/xiaowu.jpg" alt="">
<img src="image/xiaowu.jpg" alt="">
<div></div>
</body>
</html>