定位样式详解
绝对定位
position：absolute;
设置了绝对定位的元素会原地上飘，类似与浮动，会脱离默认元素普通流布局。
同时绝对定位的默认是相对与浏览器本身的。
<head>
<style>
.box1{
width:100px;
height:100px;
postion:absolute;
top:10px; /*top的值表示离浏览器顶部的距离*/
left:20px;/*left表示离浏览器左部的距离*/
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</body>
相对定位
相对定位的相对是相对于父级来说的。 position: relative;
<head>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px;
border: 1px solid #ccc;
}
.son {
width: 100px;
height: 100px;
background-color: black;
position: relative;
top: 20px;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
效果图：相对与粉色区域的定位。
固定定位
所谓的固定定位实际上是相对于浏览器的页面而定位的，这里和绝对定位有着很大的区别，如果一个界面有着滚动条，而若移动滚动条，固定定位的区域会相对着滚条“移动”，而绝对定位的区域会保持不动。
position: fixed;代码和上面类似。
元素垂直水平
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: lightblue;
/* margin: auto; */
position: fixed;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
父相子绝
父级是相对定位，而子级是绝对定位，其效果和相对定位相同。
<style>
.fa {
width: 300px;
height: 300px;
background-color: lightblue;
/* margin: 200px; */
position: absolute;
top: 100px;
left: 200px;
padding: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: black;
position: relative;
/* top: 20px;
left: 30px; */
}
</style>
伪类样式
伪类样式鼠标悬浮效果：
div:hover img
hover前面是作用与哪个地方，hover后面是鼠标放在hover前面区域改变的样式。（值得注意的是这种必须是悬浮父类，改变子代否则无效）。
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
}
/* div:hover {
width: 300px;
height: 300px;
background-color: lightblue;
background-image: url(https://teacher.shiguangkey.com/static/favicon.40dc8c1e.ico);
} */
div:hover img {
width: 200px;
height: 200px;
/* opacity: 1; */
/* z-index: 1; */
display: block;
}
img {
/* opacity: 0; */
/* z-index: -2; */
display: none;
}
</style>
</head>
<body>
<div>
<img src="" alt="">
</div>
</body>
/* z-index: -2; */
display: none;
}
</style>