Html 我的一个元素与另一个元素重叠_Html_Css_Z Index_Overlapping

Html 我的一个元素与另一个元素重叠

html css

Html 我的一个元素与另一个元素重叠,html,css,z-index,overlapping,Html,Css,Z Index,Overlapping,我是web开发的初学者我不知道如何使用CSS将我的徽标带到前台。我已经尝试将z-index设置为1000，将position设置为relative，但仍然失败在这里，我提供了完整的代码，因为我无法找出哪里出了问题我应该怎么做才能把元素带到前面 “”\_(ツ)_/“” *{ 保证金：0；填充：0； } 身体{ 字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；背景：线性梯度（向右，#9c27b0，#8ecdff）；

我是web开发的初学者

我不知道如何使用CSS将我的徽标带到前台。我已经尝试将z-index设置为1000，将position设置为relative，但仍然失败

在这里，我提供了完整的代码，因为我无法找出哪里出了问题

我应该怎么做才能把元素带到前面

“”\_(ツ)_/“”

*{
保证金：0；
填充：0；
}
身体{
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
背景：线性梯度（向右，#9c27b0，#8ecdff）；
}
.标志{
显示：内联块；
位置：相对位置；
弹性基准：20%；
z指数：1；
}
.logo img{
宽度：13vw；
左边距：1vw；
利润率最高：1vw；
}
导航{
位置：粘性；
}
navbar先生{
浮动：对；
}
纳瓦尔先生{
显示器：flex；
列表样式：无；
}
navbar ul li先生{
利润率最高：1.8vw；
保证金权利：3vw；
}
navbar ul li a.先生{
文字装饰：无；
颜色：#fff；
}
.info{
z指数：0；
宽度：60vw；
高度：140vh；
位置：绝对位置；
最高：50%；
左-10%；
转化：translateY（-50%）；
}
#圈{
宽度：60vw；
高度：140vh；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
边界半径：50%；
背景色：#ccc；
}


真人电话
标志

试试这个：

<body>
    <div class="wrapper">
      <div class="info">
            <div id="circle">
                <div class="feature" id="f1"></div>
                <div class="feature" id="f2"></div>
                <div class="feature" id="f3"></div>
                <div class="feature" id="f4"></div> 
            </div>
        </div>
        <nav>
            <div class="logo">
                <!-- I've commented the actual logo -->
                <!-- <img src="images/resourses/logo.png" alt=""> -->
                <h1>LOGO</h1>
            </div>
            <div class="navbar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Phones</a></li>
                    <li><a href="#">Accessories</a></li>
                    <li><a href="#">Cart</a></li>
                </ul>
            </div>
        </nav>
    </div>
</body>


标志

基本上，通过将带有info类的dev元素放在导航之前，浏览器将优先显示导航，而不是信息。

您的解决方案不起作用，因为您在导航元素的内部设置了

z-index

，而导航元素已经在圆圈后面。

z-index

仅适用于导航元素内部的所有元素e容器，因此仅在

nav

元素内

要解决此问题，请将

.info

的

z-index

设置为隐藏在其他所有内容之后，因此

.info

中的

#圆圈也隐藏在其他内容之后

*{
保证金：0；
填充：0；
}
身体{
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
背景：线性梯度（向右，#9c27b0，#8ecdff）；
}
.标志{
显示：内联块；
位置：相对位置；
弹性基准：20%；
z指数：1；
}
.logo img{
宽度：13vw；
左边距：1vw；
利润率最高：1vw；
}
导航{
位置：粘性；
}
navbar先生{
浮动：对；
}
纳瓦尔先生{
显示器：flex；
列表样式：无；
}
navbar ul li先生{
利润率最高：1.8vw；
保证金权利：3vw；
}
navbar ul li a.先生{
文字装饰：无；
颜色：#fff；
}
.info{
/*将整个信息的z索引设置为落后于其他所有信息*/
z指数：-1；
宽度：60vw；
高度：140vh；
位置：绝对位置；
最高：50%；
左-10%；
转化：translateY（-50%）；
}
#圈{
宽度：60vw；
高度：140vh；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
边界半径：50%；
背景色：#ccc；
}

真人电话
标志






对不起！如果我的代码乱七八糟，你想把哪个元素放在前面？你能在css代码中添加注释吗？将nav{position:sticky；}
更改为{position:relative；}
你想把哪些图像放在前面@SwiftLynx我想带（.logo）请添加一些解释，说明您的答案如何回答OP的问题