如何使用 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>