我已经创建了可滚动项目列表。该列表的顶部有一个标题部分,并使用覆盖在列表顶部的方框阴影。当我向列表项添加突出显示悬停效果时,列表项突出显示位于框阴影的前面。有没有办法让盒子阴影始终显示在前面?
提供的示例:https://codepen.io/jwaugh3/pen/WNbopGX
```
<div class="gameList">
<div class="gameListTitle">
<h1>Title Block</h1>
<h2>Box-Shadow Below</h2>
</div>
<div class="scroller">
<div class="force-overflow">
<div class="gameTile">
<h class="gameTileText gameTimeGrid">*GameTime*</h>
<h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h>
<h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h>
<h class="gameTileText teamOneScoreGrid">*SeriesScore*</h>
<h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h>
<h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h>
</div>
<div class="gameTileSpacer"></div>
</div>
</div>
```
.gameList {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
background-color: #6B6B6B;
border-radius: 10px;
}
.gameListTitle {
z-index: 1;
border-radius: 10px 10px 0px 0px;
background-color: #6B6B6B;
color: white;
padding: 10px;
box-shadow: 0px 10px 6px -1px rgba(0,0,0,0.58);
}
.scroller {
overflow-y: scroll;
height: 85%;
margin-right: 2px;
width: 100%;
}
::-webkit-scrollbar {
margin-top: 10px;
width: 12px;
background-color: rgb(0,0,0,0);
}
::-webkit-scrollbar-track {
margin-top: 10px;
margin-bottom: 10px;
background-color: rgb(0,0,0,0);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
margin-top: 10px;
margin-bottom: 10px;
background: white;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
}
.force-overflow {
margin-right: 3px; /*margin added to right of list for scrollbar overlap*/
}
.gameTile {
padding: 10px;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.gameTile:hover {
background-color: #A0A0A0;
z-index: 1;
}
.gameTileText {
font-size: 1rem;
font-weight: bold;
color: white;
padding: 3px;
vertical-align: middle;
}
.teamIcon {
max-width: 25px;
}
.gameTimeGrid {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
}
.tournamentNameGrid {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
}
.teamOneGrid {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
}
.teamOneScoreGrid {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
text-align: center;
}
.teamTwoGrid {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
}
.teamTwoScoreGrid {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
text-align: center;
}
.gameTileSpacer {
width: 100%;
height: 3px;
background-color: #2D2D2D;
}
```
所以要在第一个列表项上重叠阴影?
您可以像这样将插入阴影添加到第一个列表项悬停中:
.gameTile:first-child:hover {
background-color: #A0A0A0;
z-index: 1;
box-shadow: inset 0px 10px 6px -1px rgba(0,0,0,0.58);
}
这里的问题是由未处理的堆栈上下文引起的。
您希望一个元素位于另一个元素上方,您需要创建一个堆叠上下文How To
默认情况下,将在其之后的元素是之前的元素
div {
height: 100px;
width: 150px;
color: white;
}
.before {
background: red;
z-index: 99999;
}
.after {
background: orange;
margin-top: -30px;
margin-left: 80px;
z-index: 5;
}
<div class="before">before: z-index:99999; still cant go above</div>
<div class="after">after : z-index:5; still cant go below</div>
无论您应用什么z-index
,都不会发生任何变化,因为没有堆栈上下文。
现在我们已经涵盖了基础知识,让我们回到您的问题,您所需要的只是一个堆栈上下文,然后使用z-index进行更改(首先出现。)>
幸运的是,您正在使用CSS Grid,只需添加display:grid
,它似乎缺少.gameList
注意:
请记住,堆栈上下文仅影响直接子级现在由于有了CSS网格,我们有了堆栈上下文,我们需要给.gameListTitle
一个比.scroller
高的z索引,因为它紧随其后]
.gameList { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background-color: #6B6B6B; border-radius: 10px; display: grid /* Added */ } /* z-index :1 */ .gameListTitle { z-index: 1; border-radius: 10px 10px 0px 0px; background-color: #6B6B6B; color: white; padding: 10px; box-shadow: 0px 10px 6px -1px rgba(0, 0, 0, 0.58); } /* no z-index which lower than 0*/ .scroller { overflow-y: scroll; height: 85%; margin-right: 2px; width: 100%; } ::-webkit-scrollbar { margin-top: 10px; width: 12px; background-color: rgb(0, 0, 0, 0); } ::-webkit-scrollbar-track { margin-top: 10px; margin-bottom: 10px; background-color: rgb(0, 0, 0, 0); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { margin-top: 10px; margin-bottom: 10px; background: white; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; } .force-overflow { margin-right: 3px; /*margin added to right of list for scrollbar overlap*/ } .gameTile { padding: 10px; display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; } .gameTile:hover { background-color: #A0A0A0; z-index: 1; } .gameTileText { font-size: 1rem; font-weight: bold; color: white; padding: 3px; vertical-align: middle; } .teamIcon { max-width: 25px; } .gameTimeGrid { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 2; } .tournamentNameGrid { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3; } .teamOneGrid { grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2; } .teamOneScoreGrid { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; text-align: center; } .teamTwoGrid { grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: 2; } .teamTwoScoreGrid { grid-row-start: 3; grid-row-end: 4; grid-column-start: 2; grid-column-end: 3; text-align: center; } .gameTileSpacer { width: 100%; height: 3px; background-color: #2D2D2D; }
<div class="gameList"> <div class="gameListTitle"> <h1>Title Block</h1> <h2>Box-Shadow Below</h2> </div> <div class="scroller"> <div class="force-overflow"> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> <div class="gameTile"> <h class="gameTileText gameTimeGrid">*GameTime*</h> <h class="gameTileText tournamentNameGrid">*TournamentName, Year*</h> <h class="gameTileText teamOneGrid"><img src="../resources/Griffinlogo_square.png" class="teamIcon">*TeamName*</h> <h class="gameTileText teamOneScoreGrid">*SeriesScore*</h> <h class="gameTileText teamTwoGrid"><img src="../resources/IG.jpg" class="teamIcon">*TeamName*</h> <h class="gameTileText teamTwoScoreGrid">*SeriesScore*</h> </div> <div class="gameTileSpacer"></div> </div> </div> </div>