如何使我的悬停下拉菜单在我的旋转木马上保持可见

Question

这是我的代码，我创建了一个下拉菜单栏，我有很多下拉菜单悬停，但后来当我创建了一个旋转木马，当我在我的下拉菜单悬停在旋转木马后面，但我希望他们在旋转木马的前面，所以我可以访问下拉菜单中的链接这里的下拉菜单和旋转木马的代码。

Dropdown.jsx

import "./dropdown.css"
import styled from "styled-components"
const Container = styled.div`
height: 50px;
left: 0px;
top: 61px;
background: #efefef;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
`
const Dropdown = () => {
return (
<div>
<Container>
<div className="menu-area">
<ul>
<li>Fashion
<ul className="dropdown">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
</ul>
</li>
<li>Grocery
<ul className="dropdown">
<li>Vegetables</li>
<li>Oil</li>
<li>Bakery</li>
<li>Cerelas</li>
<li>Dairy</li>
</ul>
</li>
<li>Phone
<ul className="dropdown">
<li>Apple</li>
<li>MI</li>
<li>Samsung</li>
<li>Realme</li>
<li>Nothing</li>
<li>Oneplus</li>
</ul>
</li>
<li>Home
<ul className="dropdown">
<li ><a href="/"> Appliances</a> </li>
<li>Decors</li>
<li>Utensils</li>
<li>Bedroom</li>
<li>Bathroom</li>
</ul>
</li>
<li>Beauty
<ul className="dropdown">
<li>Moisturizers</li>
<li>Perfumes</li>
<li>Lipsticks</li>
<li>Hair Colors</li>
</ul>
</li>
<li>Electronics
<ul className="dropdown">
<li>Washing Machine</li>
<li>Refrigerator</li>
<li>TV</li>
<li>Microwave</li>
<li>Laptop</li>
</ul>
</li>
</ul>
</div>
</Container>
</div>
)
}
export default Dropdown

dropdown.css

.menu-area ul{
list-style: none;
}
.menu-area {

display: inline-block;
text-align: center;
position: absolute;
/* top: 10%; */
left: 50%;
transform: translate(-50%);
}
.menu-area li:hover{
background-color: rgb(216, 216, 216);
}
.menu-area > ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
/* background-color: white; */
width: 100vw;

}
.menu-area > ul >li{
position: relative;
cursor: pointer;
font-size: 16px;
letter-spacing: 1px;
float: left;
width: 136px;
height: 50px;
line-height: 50px;
margin: 0px 30px;

}
.dropdown{
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 0;
}
.dropdown li{
background: rgba(218, 218, 218, 0.332);
display: none;
}
.dropdown li:hover{
background: rgb(216, 216, 216);
opacity: 1;
}
.menu-area li:hover > .dropdown li{
display: block;
}

Slider.jsx

import styled from "styled-components"
import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import SliderItems from './sdata'
import { useState } from "react";
const Container = styled.div`
width: 100%;
height :40vh ;
display: flex;
position: relative;
overflow: hidden;
margin-top: 10px;
`;
const Wrapper = styled.div`
height: 80vh;
display: flex;
transition: all 1.5s ease;
transform: translateX(${props=>props.slideIndex * -100}vw);
`
const Slide = styled.div`
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
`
const ImgContainer = styled.div`
height: 100%;
flex: 1;
width: 100vw;
`
const Image = styled.img`
height: 80%;
object-fit: cover;
`

const Arrow = styled.div`
width: 50px;
height: 50px;
background-color: #fff7f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
bottom: 0;
left: ${props => props.direction === 'right' && "10px"};
right: ${props => props.direction === 'left' && "10px"};
cursor: pointer;
margin: auto;
opacity: 0.5;
z-index: 2;
`
const Slider = () => {
const [slideIndex, setslideIndex] = useState(0)
const handleClick = (direction) => {
if (direction ==="left") {
setslideIndex(slideIndex> 0 ? slideIndex - 1 : 2)
} else {

setslideIndex(slideIndex> 2 ? slideIndex + 1 : 0)
}
}
return (
<Container>
<Arrow direction="left" onClick={() => { handleClick("left") }}>
<ArrowRightIcon />
</Arrow>
<Wrapper slideIndex={slideIndex}>
{SliderItems.map((item, index) => (
<Slide  key={index}>
<ImgContainer >
<Image src={item.img} alt="image" />
</ImgContainer>

</Slide>
))}
</Wrapper>
<Arrow direction="right" onClick={() => { handleClick("right") }}>

<ArrowLeftIcon />
</Arrow>
</Container>
)
}
export default Slider

代码

Answer 1

如果两个定位的元素重叠而没有指定z-index，则在HTML代码中最后定位的元素将显示在顶部，并且从代码的外观来看，您的滑块具有更高的堆栈顺序。源

要解决这个问题，试着给.dropdown一个更高的z-index，所以它在滑块的顶部。

修复

.dropdown {
z-index: 100;
} 

或

如果你给菜单本身一个z-index属性可能会更好，这样整个菜单重叠滑动条，而不是单独的下拉菜单。

.menu-area {
display: inline-block;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%);
z-index: 100;
}