Question

简单的项目，但是编程的初学者，如此挣扎。我试图设置几个按钮来创建一个滑块来更改图片。我的问题是，当我在包含按钮的div中将position属性设置为absolute时，包含按钮的div元素将消失。

所以这是我的页面的截图，其位置设置为相对：

.buttons {
          cursor: pointer;
          position: relative;
}

并将其设置为绝对值：

.buttons {
          cursor: pointer;
          position: absolute;
}

这是代码

HTML

<!DOCTYPE html>
<html lang="en-US">

    <head>

        <meta charset="UTF-8">

        <title>Photography</title>

        <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="JavaScript2b.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>


    </head>

    <body>

    <div id="header">
    </div>

      <div id="container">

        <div id="imagewrap">
          <img src="Images/01Folder/Image.jpg" height="500px" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);">
          </div>

          <div id="next" class="buttons" onclick="change(1);">
          </div>
        </div>

      </div>


    <div id="footer">
    </div>

    </body>

  <script type="text/javascript" src="JavaScript2.js"></script>

</html>

CSS

html, body {
            margin: 0px;
            padding: 0px;
            height: 100vh;
    }

#header {
    position: relative;
    height: 10%;
    width: 100%;
    background-color: lightgray;
}

#footer {
    position: relative;
    height: 10%;
    width: 100%;
    background-color: lightgray;
    display: block;
}

#container {
    height: 80%;
    width: 100vw;
    background-color: white;
    min-height: 580px;
    text-align: center;
}

#imagewrap{
    position: relative;
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 5;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
}

.buttons {
          cursor: pointer;
          position: relative;
}

#previous {
            background-image: url(Images/carremoins.png);
            background-repeat: no-repeat;
            background-position: center center;
            width: 20px;
            height: 20px;
        }

#next {
            background-image: url(Images/carreplus.png);
            background-repeat: no-repeat;
            width: 20px;
            height: 20px;
            background-position: center center;
}

我希望按钮位于图片上，而不是在图片下方，但不能理解为什么它们会消失。任何帮助表示赞赏。

Answer 1

尝试将按钮上的z-index设置为大于图像（5）的值。

.buttons {
   cursor: pointer;
   position: relative;
   z-index: 10;
}

当位置设置为绝对时，元素会消失吗？

1 个答案: