css样式显示与定位

   显示
    display: block;块状元素显示  
    display: inline;行内元素显示 
    display: inline-block;行内块状元素显示 
    display: flexbox;弹性盒子 当元素的总宽度小于其中的元素之和时,将宽度平均分配
    display: none;隐藏
定位

position: static 默认,没有定位,

position:fixed 绝对定位,相对浏览器 常见的如回到顶部和两侧的悬浮栏 不占据空间直接在最上方 会遮挡下方 无法使用top

position:elative 相对定位,相对正常位置 使用top从本应存在的位置进行调整

position:absolute 绝对定位,相对不是static的父元素定位

.aoa{
    position:absolute;
    border:  red 1px solid;
    background-color: blue;
    top:40px;
    display: none;
}
.qaq{
    position: relative;
    height: 40px;
    line-height: 40px;
}
.qaq:hover .aoa{
    display: block;
}
<ul>
        <li class="qaq"> 十几万
            <div class="aoa"> 
                <ul>
                    <li>123</li>
                    <li>456</li>
                </ul>
            </div>
        </li>
    </ul>
隐藏下拉菜单栏的简单代码
posted @ 2020-04-18 20:03  2020小白  阅读(317)  评论(0)    收藏  举报