使用位置絕對元素防止陰影出血？-有解無憂

我正在開發一個下拉串列，但我遇到了一個問題，因為我希望有一個絕對定位的專案容器，當你將滑鼠懸停在它上面時，它會出現，但問題是它的陰影會滲入實際的下拉串列本身。這是一個復制品：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.dropdown {
  position: relative;
  width: 200px;
  height: 40px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #efefef;
}

.items {
  display: none;
  position: absolute;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100px;
  top: 100%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #f7f7f7;
}

.dropdown:hover .items {
  display: block;
}

.item {
  padding: 5px 10px;
}

<div class="dropdown">
  <div class="items">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>
<div>hello</div>

.items如您所見，當您將滑鼠懸停在下拉選單上時，可以看到容器陰影的頂部。這是我所指的圖片：

使用位置絕對元素防止陰影出血？

顯而易見的解決方案是讓盒子陰影僅適用于下拉選單，但問題是由于items容器是絕對位置，它不會接收盒子陰影。

有沒有辦法解決？

uj5u.com熱心網友回復：

您可以在上添加一個比他的專案高度小的:before元素。.dropdown像這樣：

.dropdown:hover:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 98px;
    box-shadow: rgb(0 0 0 / 24%) 0px 6px 8px;
    background: red;
    bottom: -100px;
    z-index: 0;
}

此外，從.items元素中移除陰影。

uj5u.com熱心網友回復：

我認為杰克遜使用偽元素的想法是正確的。

雖然我的方法如下：

.dropdown:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #efefef;
}

顯示代碼片段

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.dropdown {
  position: relative;
  width: 200px;
  height: 40px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #efefef;
}

.items {
  display: none;
  position: absolute;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100px;
  top: 100%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #f7f7f7;
}

.dropdown:hover .items {
  display: block;
}
.dropdown:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #efefef;
}

.item {
  padding: 5px 10px;
}

<div class="dropdown">
  <div class="items">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>
<div>hello</div>

第二種方法可能是在懸停時增加 .dropdown 的高度，并將專案串列設定為不相對于 .dropdown 高度的位置：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.dropdown {
  position: relative;
  width: 200px;
  height: 40px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #efefef;
}

.items {
  display: none;
  position: absolute;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100px;
  top: 40px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #f7f7f7;
}

.dropdown:hover .items {
  display: block;
}
.dropdown:hover {
  height: 140px;
}

.item {
  padding: 5px 10px;
}

<div class="dropdown">
  <div class="items">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>
<div>hello</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446180.html

標籤：html css 绝对

上一篇：為什么添加海報圖片時視頻播放器的大小會發生變化？

下一篇：HTML和CSS影像填充不起作用