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

Question

I have a flexbox with items in it and I want to make it scrollable horizontally. I have set overflow-x: scroll; for the parent element. The items each have a nice on-hover glow animation but the item is contained within the parent element and the is glow cut by its parent box and won't go over it no matter what I do. It only works when I remove the overflow-x: scroll;but that makes the whole thing not scrollable.

I tried setting position: absolute; to the child elements, but that messes up everything.

 .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

I have have added align-items: center to align all the items center horizontally so it leaves even space above and bottom.

You were missing padding-top and padding-bottom on your wrap element because there was no space in you item it was cropping the glow to keep it inside the wrap container(here container means the total width and height of the wrap class).

After adding padding top and bottom you have the results you wanted.

 .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>