绝对定位
绝对定位的参考对象就不是自己了,而是最近的已设置了position的祖先元素,并且position不是static,而是absolute或者relative。首先看它的父元素是否设置了position为absolute或者relative,如果有就按父元素的左上角作为参考点,如果没有则再找祖父元素、曾祖父元素、高祖父元素,如果都没有就以页面文档的初始位置作为参考点。
绝对定位的元素是脱离标准流(文档流)的,即直接在标准流中删除,所以元素原来的位置会被占用。
由于绝对定位元素脱离的标准流,所以元素可以覆盖标准流中元素,也可以通过z-index设置层叠次序,z-index值越大越靠上层。如果把页面比作高楼,正常的元素都是在1层,绝对定位的元素在2层及以上,z-index越大所在层月高,越难被其他元素覆盖。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a.tip{
color: red;
text-decoration: none;
position: relative;
}
.popbox{
position: absolute;
display: none;
width: 100px;
background-color: black;
color: blanchedalmond;
top: auto;
left: 0px;
}
/* 当鼠标移动到a标签时 a标签下类名为popbox的元素将显现出来 空格表示选择该标签下的子元素*/
a:hover .popbox{
display: block;
}
</style>
<!-- <link rel="stylesheet" href="mystyle.css"> -->
</head>
<body>
<div>
web前端技术:<a href="#" class="tip">Ajax
<p class="popbox">Ajax是一种浏览器无刷新就能和web服务器交换数据的技术</p>
</a>技术和
<a href="#" class="tip">CSS
<p class="popbox">Cascading Style Sheets层叠式样式表</p>
</a>技术
</div>
</body>
</html>
实现效果