右侧扩展栏效果实现

发布时间：2020-07-07 05:29:59 阅读：501 作者：xp329486175 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

右侧扩展栏效果实现

扩展栏效果：关键逻辑：父：position:relative; display:none; 子：position:absolute;

①子元素样式
.son{
    padding:10px;
    background-color:#003300;
    color:#FFFFFF;
    width:300px;
    height:300px;
    display:none;
    position: absolute;
    z-index:999;    //必须比父元素的要大
    left:-30px;
    top:-20px;
}
②父元素样式
.father {
    z-index:99px;
    width:400px;
    height:400px;

position:relative;
}
③父div hover的设置
div:hover .son{
display:block；
}

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

右侧扩展栏效果实现

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签