文本在网站上无法选择，可能会被css屏蔽

Question

目前，我正在开发一个简单的网站，其中使用现代CSS技术（如动画和过渡）进行了大量实验。但是在实施了一些精心策划的动画之后，突然我的身体文本不再可选了。我认为一些元素掩盖了文本，但我找不到它。如果有人能指出我正确的方向，那将对我有所帮助。

您可以查看the-outsiders.nl上的开发版本，下面是我正在使用的sass的片段。

提前谢谢！

.slider {
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: 0;

li {

    span { 
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
        opacity: 1;
        z-index: -1;
        @include animation(0s, 25s, imageAnimation); 
    }

    div { 
        z-index: 1;
        position: absolute;
        bottom: 30px;
        right: 0px;
        min-width: 20em;
        text-align: left;
        opacity: 1;
        color: #fff;
        @include animation(0s, 25s, titleAnimation); 

    }

}
}

.slider,
.slider:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1; 
}


@include keyframe(imageAnimation) { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; @include transform(scale(1.025)); animation-timing-function: ease-out; }
    100% { opacity: 1; @include transform(scale(1.15)); animation-timing-function: ease-out; }
}

@include keyframe(titleAnimation) { 
    0% { opacity: 0 }
    17% { opacity: 1 }
}

Answer 1

slider在两个地方都有z-index: -1;。

取出这两个z-index后，您应该可以选择底部文本。

Answer 2

我很难确定你在问什么。但是如果你担心一个控件正在屏蔽另一个控件，你可以通过将潜在的重叠项目的背景颜色设置为亮绿色来确定是否有另一个元素屏蔽了你的输入。当某些东西在其他东西之上时，它应该是显而易见的。