margin负值的运用

最新推荐文章于 2024-09-27 15:11:44 发布

qq_23973409

最新推荐文章于 2024-09-27 15:11:44 发布

阅读量65

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_23973409/article/details/126396286

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何通过设置负margin实现盒子间的无缝排列，以及在鼠标悬停时通过调整z-index改变元素层级，实现高亮效果。示例代码展示了在无定位情况下，鼠标经过li元素时增加相对定位和改变边框颜色，同时提升元素层级的方法。

摘要由CSDN通过智能技术生成

1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index ）

    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            margin-left: -1px;
            width: 200px;
            height: 300px;
            background-color: yellow;
            border: 1px solid #050505;
        }

        ul li:hover {
            /* 1.如果盒子没有定位，鼠标经过添加相对定位即可； */
            /* position: relative; */
            border: 1px solid red;
            /* 2.如果li都有定位，则利用z-index提高层级; */
            z-index: 1;
        }
    </style>