<div#scrollbox>的滚动条部分被<div#直角三角形所阻塞。

Question

我有一个深灰色的三角形()放在滚动的一组图片()下面。滚动框的滚动条被三角形部分阻塞。我试着设置一个z索引，但没有解决这个问题。我重新安排了我的div结构，以防我搞砸了，但我很确定这一切都是正确的。这是直接的html/css。

如果任何一个明智的居民的堆叠溢出可以帮助它，将不胜感激。

​

#content-container {
    text-align: center;
    margin-bottom: 90px;
    background-color: azure;
    height:85vh;
    width: 100%;
    position: relative;
}
#right-angle-triangle {
    position: absolute;
    top: 0;
    height: 0;
    width: 0;
    padding-bottom: 20px;
    border-style: solid;
    border-width: 0 0 89vh 100vw;
    border-color: transparent transparent #333 transparent;
}

#scrollbox {
    margin: 80px;
    height: 55vh;
    overflow: auto;
    padding: 10px;
    z-index: 1;
    border-radius: 50px;
}

#flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;
}

.person-info {
    background-color: azure;
    margin: 0px 0px 40px;
    height: auto;
    border: 4px solid azure;
    border-radius: 25px;
    box-shadow: -1px 1px 3px rgb(0, 0, 0);
    z-index: 1;
 }
 
 .person-pic {
     width: 25vw;
     height: 25vw;
     border: 1px solid rgb(231, 238, 238);
     border-radius: 25px;
 }
 
 #pic1 {
     position: relative;
     object-fit: cover;
     object-position: center -55px;
 }

 #pic2 {
     position: relative;
     object-fit: cover;
     object-position: center 0px;
 }

 #pic3 {
     position: relative;
     object-fit: cover;
     object-position: center -20px;
 }

 #pic4 {
     position: relative;
     object-fit: cover;
     object-position: center;
 }

<div id="content-container">
            <div id="right-angle-triangle">
            </div>
            <div id="scrollbox">
                <div id="flex-container">
                    <div class=person-info>
                        <img class="person-pic" id="pic1" src="img/euel_marsha.jpg">
                        <div class="content-card">Names go here<br>Senior Pastors </div>
                    </div>
                    <div class=person-info>
                        <img class="person-pic" id="pic2" src="img/cliff_trish.jpg">
                        <div class="content-card">Names go here<br>Executive Pastors </div>
                    </div>
                </div>
                <div id="flex-container">
                    <div class=person-info>
                        <img class="person-pic" id="pic3" src="img/blake_quinc.jpg">
                        <div class="content-card">Names go here<br>Worship/Youth Pastors </div>
                    </div>
                    <div class=person-info>
                        <img class="person-pic" id="pic4" src="img/bev_david.jpg">
                        <div class="content-card">Names go here<br>Office Manager</div>
                    </div>
                </div>
            </div>
        </div>
    </body>

​

Answer 1

这是修复程序的一个工作示例。我做了一些小小的改变：

.right-angle-triangle

• Remove的

1. Set z-index: -1来自.content-container的背景色，因为这主要是为什么您的.right-angle-triangle被阻塞的问题：

。

看到它在这里工作：https://jsfiddle.net/co3wbLqg/

CSS

#content-container {
    text-align: center;
    margin-bottom: 90px;
    background-color: transparent;
    height:85vh;
    width: 100%;
    position: relative;
}
#right-angle-triangle {
    position: absolute;
    top: 0;
    height: 0;
    width: 0;
    padding-bottom: 20px;
    border-style: solid;
    border-width: 0 0 89vh 100vw;
    border-color: transparent transparent #333 transparent;
    z-index: -1;
}

#scrollbox {
    margin: 80px;
    height: 55vh;
    overflow: auto;
    padding: 10px;
    z-index: 1;
    border-radius: 50px;
}

#flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;
}

.person-info {
    background-color: azure;
    margin: 0px 0px 40px;
    height: auto;
    border: 4px solid azure;
    border-radius: 25px;
    box-shadow: -1px 1px 3px rgb(0, 0, 0);
    z-index: 1;
 }

 .person-pic {
     width: 25vw;
     height: 25vw;
     border: 1px solid rgb(231, 238, 238);
     border-radius: 25px;
 }

 #pic1 {
     position: relative;
     object-fit: cover;
     object-position: center -55px;
 }

 #pic2 {
     position: relative;
     object-fit: cover;
     object-position: center 0px;
 }

 #pic3 {
     position: relative;
     object-fit: cover;
     object-position: center -20px;
 }

 #pic4 {
     position: relative;
     object-fit: cover;
     object-position: center;
 }

HTML

<div id="content-container">
    <div id="right-angle-triangle">
    </div>
    <div id="scrollbox">
        <div id="flex-container">
            <div class=person-info>
                <img class="person-pic" id="pic1" src="img/euel_marsha.jpg">
                <div class="content-card">Names go here<br>Senior Pastors </div>
            </div>
            <div class=person-info>
                <img class="person-pic" id="pic2" src="img/cliff_trish.jpg">
                <div class="content-card">Names go here<br>Executive Pastors </div>
            </div>
        </div>
        <div id="flex-container">
            <div class=person-info>
                <img class="person-pic" id="pic3" src="img/blake_quinc.jpg">
                <div class="content-card">Names go here<br>Worship/Youth Pastors </div>
            </div>
            <div class=person-info>
                <img class="person-pic" id="pic4" src="img/bev_david.jpg">
                <div class="content-card">Names go here<br>Office Manager</div>
            </div>
        </div>
    </div>

</div>