relative(相对定位)
相对于原来的位置进行定位,表现内容已经脱离了文本流,只是在本文流中还为原来的相对对定位留下了原有的总宽与总高(内容的高度或是宽度加上margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。
absolute(绝对定位)
相对于父级元素的定位,脱离文档流,如果父级元素用了相对定位,那么其会紧随其下,不用担心对其的问题(子爵父相
块隐藏
visibility 隐藏函数,真正的隐藏,占位置
display 隐藏函数,但是不占据位置
opacity 透明度 虽然可以隐藏,但不是真正的隐藏,透明的
//.box为施行者,hover为触发者,.boxs为受害者
.box:hover .boxs{
visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height:50px;
background-color: grey;
position: relative;
top:50px;
left:100px;
border: 1px solid black;
}
.boxs{
width: 200px;
background: grey;
position: absolute;
top:50px;
left:-1px;
border: 1px solid black;
/*opacity: 0.5;*/
visibility: hidden;
}
li{
list-style: none;
}
//.box为施行者,hover为触发者,.boxs为受害者
.box:hover .boxs{
//visibility 隐藏函数,真正的隐藏,占位置
//display 隐藏函数,但是不占据位置
//opacity 透明度 虽然可以隐藏,但不是真正的隐藏,透明的
visibility: visible;
}
</style>
</head>
<body>
<div class="box">
我的下拉菜单
<ul class="boxs">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</div>
</body>
</html>