如何使用 overflow-x: scroll 更改水平滾動 flexbox 的 z-index？

Question

我有一個 flexbox 里面有項目，我想讓它水平滾動。 我設置了 overflow-x: scroll; 對於父元素。 每個項目都有一個很好的懸停發光 animation 但該項目包含在父元素中並且發光被其父框切割並且無論我做什么都不會 go 在它上面。 它僅在我刪除overflow-x: scroll;時有效但這使得整個事情不可滾動。

我嘗試設置position: absolute; 到子元素，但這會弄亂一切。

 .flexbox-container { width: auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; padding-bottom: 60px; }.category-wrap { padding-left: 2.4%; padding-right: 3.7%; display: flex; flex-wrap: nowrap; flex-direction: row; overflow-x: scroll; position: relative; width: auto; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; }.item { order: revert; animation-fill-mode: backwards; transition: all.2s ease-in-out; width: 22%; min-width: 319px; z-index: 1; height: 450px; margin: 15px; background: linear-gradient(to bottom, rgb(53, 53, 53) 53%, rgb(40, 40, 40) 0%); border-radius: 2px; -moz-border-radius: 4px; padding-top: 10px; }.item:hover { transform: scale(1.05); animation: glow 1.7s infinite alternate; } @keyframes glow { from { box-shadow: 10px 0 40px #bb7900, -10px 0 40px #c66900; } to { box-shadow: 20px 0 40px #c88200, -20px 0 40px #ea8500; } }

 <div class="flexbox-container"> <div class="category-wrap popular scrolling"> <div class="item item-142"></div> <div class="item item-141"></div> <div class="item item-140"></div> </div> </div>

Answer 1

我添加了 align-items: center 以使所有項目水平居中對齊，以便在上方和底部留出均勻的空間。

您在 wrap 元素上缺少 padding-top 和 padding-bottom ，因為您的項目中沒有空間，它正在裁剪發光以將其保留在 wrap 容器內（此處容器表示 wrap 類的總寬度和高度）。

添加填充頂部和底部后，您將獲得所需的結果。

 .flexbox-container { width: auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; padding-bottom: 60px; align-items: center; }.category-wrap { padding-top: 5%; padding-bottom: 5%; padding-left: 2.4%; padding-right: 3.7%; display: flex; flex-wrap: nowrap; flex-direction: row; overflow-x: scroll; position: relative; width: auto; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; }.item { order: revert; animation-fill-mode: backwards; transition: all.2s ease-in-out; width: 22%; min-width: 319px; z-index: 1; height: 450px; margin: 15px; background: linear-gradient(to bottom, rgb(53, 53, 53) 53%, rgb(40, 40, 40) 0%); border-radius: 2px; -moz-border-radius: 4px; padding-top: 10px; }.item:hover { transform: scale(1.05); animation: glow 1.7s infinite alternate; } @keyframes glow { from { box-shadow: 10px 0 40px #bb7900, -10px 0 40px #c66900; } to { box-shadow: 20px 0 40px #c88200, -20px 0 40px #ea8500; } }

 <div class="flexbox-container"> <div class="category-wrap popular scrolling"> <div class="item item-142"></div> <div class="item item-141"></div> <div class="item item-140"></div> </div> </div>