为什么导航按钮没有显示在幕布下面，而图像显示在幕布下面?

Question

祝大家一切顺利!

我正在为一个数字艺术展览设计一个平台，我们想要一个可以滑动的窗帘来展示图像。我使用这个示例代码来创建窗帘效果:https://css-tricks.com/creating-css-sliding-door-effect/对于图像的旋转木马，我使用了这个示例代码:https://codepen.io/SitePoint/pen/gRJWqm由于我完全是盲人，所以CSS对我来说有点挑战，因为我自己测试东西有点困难。:)

有人告诉我，当窗帘向两边滑动时，图片应该显示出来，但改变图片的按钮没有显示出来。我不知道为什么，因为图像和按钮都包含在" curtain_content& quot;div .

我想知道是否有人可能会看一下代码，并告诉我我需要做什么，使按钮显示为他们应该?任何帮助将非常感激!

这是我的风格:

<style>
body {
background-color: aliceblue;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
h1 {
text-align: center;
margin-bottom: 1.5em;
}
h2 {
text-align: center;
color: #555;
margin-bottom: 0;
}
.carousel {
padding: 20px;
perspective: 500px;
display: flex;
flex-direction: column;
align-items: center;
}
.carousel > * {
flex: 0 0 auto;
}
.carousel figure {
margin: 0;
width: 100%;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.carousel figure img {
width: 100%;
box-sizing: border-box;
padding: 0 0px;
}
.carousel figure img:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
}
.carousel nav {
display: flex;
justify-content: center;
margin: 20px 0 0;
}
.carousel nav button {
flex: 0 0 auto;
margin: 0 5px;
cursor: pointer;
color: #333;
background: none;
border: 1px solid;
letter-spacing: 1px;
padding: 5px 10px;
}
.curtain {
margin: 0 auto;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
}
.curtain__wrapper {
width: 100%;
height: 100%;
}
.curtain__wrapper input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
top: 0;
left: 0;
}
.curtain__wrapper input[type=checkbox]:checked ~ div.curtain__panel--left {
transform: translateX(0);
}
.curtain__wrapper input[type=checkbox]:checked ~ div.curtain__panel--right {
transform: translateX(0);
}
.curtain__panel {
display: flex;
align-items: center;
background: orange;
color: #fff;
float: left;
position: relative;
width: 50%;
height: 100vh;
transition: all 1s ease-out;
z-index: 2;
}
.curtain__panel--left {
justify-content: flex-end;
transform: translateX(-100%);
}
.curtain__panel--right {
justify-content: flex-start;
transform: translateX(100%);
}
.curtain__content {
align-items: center;
background: #333;
color: #fff;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
padding: 1rem 0;
position: absolute;
text-align: center;
z-index: 1;
width: 100%;
}
.curtain__content img {
width: 50%;
}
</style>

下面是body标签中的HTML:

<div class="curtain">
<div class="curtain__wrapper">
<input type="checkbox" checked>

<div class="curtain__panel curtain__panel--left">
<h1>Click to reveal&nbsp;</h1>
</div> <!-- curtain__panel -->

<div class="curtain__content">
<div class="carousel" data-gap="80">
<figure style="transform-origin: 50% 50% -899.521px; transform: rotateY(-4.71239rad);">
<img src="projekt1.png" alt="" style="padding: 80px;">
<img src="projekt2.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(0.785398rad);">
<img src="projekt3.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(1.5708rad);">
<img src="projekt4.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(2.35619rad);">
<img src="projekt5.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(3.14159rad);">
<img src="projekt6.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(3.92699rad);">
<img src="projekt7.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(4.71239rad);">
<img src="projekt8.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
<img src="projekt9.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
<img src="projekt10.png" alt="" style="padding: 80px; transform-origin: 50% 50% -899.521px; transform: rotateY(5.49779rad);">
</figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next
</button>
</nav>
</div>
</div>
<div class="curtain__panel curtain__panel--right">
<h1>a special reward...</h1>
</div> <!-- curtain__panel -->

</div> <!-- curtain__wrapper -->
</div> <!-- curtain -->

提前感谢!

祝你一切顺利!亲切的问候,Niklas

Answer 1

可能有几个问题，我将按照我认为最可能的顺序来讨论。

文字与背景颜色相同

此时，按钮文本与背景颜色相同，即#333。我们可以在下面两个CSS声明中看到这一点:

.curtain__content {
background: #333;
}
.carousel nav button {
color: #333;
}

因此，按钮与背景融为一体。

按钮可能不在屏幕上

在试验猫的图片时，如果图片足够大，那么我发现导航按钮已经离开了屏幕底部和窗帘区域。换句话说，图片推动了视窗下方的按钮。

您有几个选项取决于所需的设计:

• 确保窗帘区域足够大以适合旋转木马和按钮(例如，通过不使用视口尺寸)
• 确保旋转木马调整大小以适应屏幕
• 允许按钮覆盖旋转木马