[分享]css两条线重叠

当CSS样式表中设置了两条相交的线时，这时候的显示效果就会成为一个疑惑。因为CSS会将这两条线重叠显示。如果你想通过CSS将这两条线分离开，则需要了解CSS的不同属性。.line1 { : absol...

当CSS样式表中设置了两条相交的线时，这时候的显示效果就会成为一个疑惑。因为CSS会将这两条线重叠显示。如果你想通过CSS将这两条线分离开，则需要了解CSS的不同属性。

.line1 {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 20px;
    width: 100%;
    border-top: 2px solid blue;
}

.line2 {
    position: absolute;
    top: 70px;
    left: 50px;
    height: 20px;
    width: 100%;
    border-top: 2px solid red;
} 

在上述代码中，两条线的颜色和边框宽度已定义，但这些样式并不能使这两条线分开显示。你还需要为两条线设置不同的CSS属性，才能将它们分离开来。

.line1 {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 20px;
    width: 100%;
    border-top: 2px solid blue;
    z-index: 1;
}

.line2 {
    position: absolute;
    top: 70px;
    left: 50px;
    height: 20px;
    width: 100%;
    border-top: 2px solid red;
    z-index: 2;
} 

在这段代码中，使用了z-index属性定义两条线的优先级。即将第二条线的优先级设置为大于第一条线，因此第二条线将显示为在第一条线的上方。