三大定位-CSDN博客

本文链接：https://blog.csdn.net/qq_40281275/article/details/82106681

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>