Html 当“位置”设置为“绝对”时元素消失？_Html_Css_Css Position

Html 当“位置”设置为“绝对”时元素消失？

html css

Html 当“位置”设置为“绝对”时元素消失？,html,css,css-position,Html,Css,Css Position,简单的项目，但编程初学者，所以挣扎。我试图设置几个按钮来创建一个滑块来更改图片。我的问题是，当我在包含按钮的div中将position属性设置为absolute时，包含按钮的div元素将消失这是我的页面截图，位置设置为相对： .buttons { cursor: pointer; position: relative; } 将其设置为绝对： .buttons { cursor: pointer; positio

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

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

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

将其设置为绝对：

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

这是代码

html

我希望按钮在图片上，而不是在它下面，但不明白为什么它们消失了。感谢您的帮助。

尝试将按钮上的z索引设置为大于图像（5）的值

添加一些偏移量，例如

left:0和<代码>顶部：0绝对元素的值。嘿@Paul，这方面运气好吗？到底是z指数的情况吗？解决办法是像Pangloss建议的那样添加一些补偿。我不太清楚为什么，这定义了元素相对于父元素左上角的位置。请注意，如果此宽度发生变化（例如，对于不同的设备），则朝向图像的相对位置也会发生变化。您所说的@ata是什么意思？
<!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>

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;
}

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