css 水平滚动条上的方框阴影

izkcnapc 于 2023-01-22 发布在其他

关注(0)|答案(3)|浏览(132)

我使用框状阴影来给予人一种div #collection-content位于页面其他部分下方的印象，然而，垂直滚动条正确地将自己置于阴影之下（见下图中的绿色圆圈），而水平滚动条却没有（见红色圆圈），我不知道为什么。
我试着修改z-index，唯一能让它工作的方法是将#collection-content的z-index设置为-1，但这会使它不可选（不知道这是不是正常行为？）.#collection-content和#side-panel（有功能障碍阴影的那个）上的任何其他值都不起作用.
我不能在这里张贴代码或创建一个小提琴，因为有太多的代码。所以，如果有人有一个疯狂的猜测，我会很感激。
奇怪的是我只设置了overflow-y：在#collection-content上滚动，水平滚动条仍然出现（就像溢出一样：自动，所以，正常行为），但当我删除溢出-y：滚动，然后水平滚动条也消失了，我觉得这不正常。

css

来源：https://stackoverflow.com/questions/62305540/box-shadow-over-horizontal-scrollbar

3条答案

按热度按时间

3vpjnl9f1#

侧边栏有位置吗，相对的，固定的还是绝对的？没有位置，z轴就没有作用。

赞(0）回复(0）举报 2023-01-22

avwztpqn2#

你应该试着取消样式
把这个添加到你的css

*,
*::before,
*::after {
  box-sizing: border-box;
}


ul[class],
ol[class] {
  padding: 0;
}


body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}


body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}


ul[class],
ol[class] {
  list-style: none;
}


a:not([class]) {
  text-decoration-skip-ink: auto;
}


img {
  max-width: 100%;
  display: block;
}


article > * + * {
  margin-top: 1em;
}


input,
button,
textarea,
select {
  font: inherit;
}


@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

赞(0）回复(0）举报 2023-01-22

lndjwyie3#

我只是简单地使用了下面的CSS代码，我希望它能有用：