覆盖溢出隐藏的问题

Question

我对 overflow: hidden 有问题，我必须将其设置为动画滑动，但我必须在设置了此属性的两个容器之间放置徽标。我阅读了很多关于这个问题的文章，但不幸的是，解决方案并不直接准确地解决我的问题。我尝试使用 z-index 和 !important 属性，但效果不佳。你知道如何解决它吗？

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100vw;
}
.wrapper{
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 20vh 70vh 10vh;
}
nav{
    position: relative;
    background-color: red;
    overflow: hidden;
}

img{
    position: absolute;
    bottom: 0%;
    right: 5%;
    transform: translateY(50%);
}
section{
    background-color: blue;
    overflow: hidden;
}
footer{
    background-color: green;
}

<div class="wrapper">
        <nav>
            <div>
                <img src="https://via.placeholder.com/150/000000/" alt="">
            </div>
        </nav>
        <section></section>
        <footer></footer>
    </div>

如果有什么不清楚的可以问:)

编辑页面的方式如下： 如果您查看页面的右上角，您会看到徽标已隐藏，而我想要实现的是保持其可见。

Answer 1

使用 z-index 可以让您更清楚地了解分层元素。尤其是在未来，当您扩展代码时，它会变得越来越复杂。

一种方法可能是删除 overflow: hidden; - 这就是您重叠的 img 被切断的原因。

但我想你会因为滑动动画而需要它！？
那么如何更改 HTML 元素呢？

使用 position: relative; 创建一个新的内容包装器。 将 <nav> 之外的 img 与 .content 一起移动到新的 div <section> 中，因此它不是 overflow: hidden; 的目标并给它一个 {{1} }. Grid 仍然完整，因为 id 中的元素仍然是 3（页眉导航、内容部分和页脚）
调整 logo-img 的位置。所以它总是相同的大小 (150px) 所以给 .wrapper 那是高度的一半，所以它在中间的 header-nav 和 content-section 之间重叠。

top: -75px;

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 1000px;
    width: 100vw;
}
.wrapper{
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 200px 700px 100px;
}
nav{
    background-color: red;
    overflow: hidden;
}

.content {
  position: relative;
}
#floatingLogo{
    position: absolute;
    /* half of logo-height */
    top: -75px;
    right: 5%;
}
section{
    background-color: blue;
    overflow: hidden;
}
footer{
    background-color: green;
}