在图像旁边定位按钮

Question

我已经问了一个 ，但现在我已经更改了一些样式并且不知道如何 将关闭按钮定位到图像的右上角 以及图像左侧和右侧的 上一个和下一个按钮 与指定距离它.

就在我页面的页脚之前：

<div class="modal" id="modal">
    <div id="modal-content">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        <img id="modal-image">
    </div>
</div>

我如何显示模态：

function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}

这是我的造型：

/* Background when image is shown */
#modal {
    display: none; /* Hidden by default */
    /* Position */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    /* Sizing */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(119, 119, 119); /* Fallback color */
    background-color: rgba(119, 119, 119, 0.7); /* Black w/ opacity */
}

/* Image wrapper */
#modal-content {
    /* Sizing */
    width: 100%;
    height: 100%;
}

/* Image */
#modal-image {
    /* Sizing */
    max-width: 80%;
    height: calc(100vh * 0.6);
    /* Style */
    border: 10px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.54) 0px 0px 7px 4px;
    /* Horizontally center image */
    margin: auto;
    /* Zoom (image gets bigger) on open */
    animation-name: zoom;
    animation-duration: 0.6s;
    /* Vertically center image */
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* Gallery Buttons */
.gallery-button {
    /* Style */
    color: #ffffff;
    transition: 0.3s;
    background-color: #000000;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px 3px;
    /* Makes the Button round */
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Previous Button */
#previous {
    font-size: 12px;
    /* Position */
    position: absolute;
    /* Horizontally */
    left: 30px;
    /* Vertically */
    top: 50%;
    transform: translateY(-50%);
}

/* Next Button */
#next {
    font-size: 12px;
    /* Position */
    position: absolute;
    /* Horizontally */
    right: 30px;
    /* Vertically */
    top: 50%;
    transform: translateY(-50%);
}

/* Close Button */
#close {
    font-size: 15px;
    /* Position */
    position: absolute;
    top: 25px;
    right: 30px;
}

/* Change cursor when pointing on button */
.gallery-button:hover,
.gallery-button:focus {
    text-decoration: none;
    cursor: pointer;
}

/* 100% image width on smaller screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

目前关闭按钮在整个页面的右上角，上一个和下一个按钮已经垂直居中（这很好），但还没有靠近图像。我怎样才能将按钮附加到图像上。调整图像的大小有点困难，我不知道如何以不同的方式来做，这样我就可以将调整过的图像和按钮放在 div.

中

Answer 1

我已经排除了你的CSS。因为实在是太乱了。但是如果你检查下面这段代码，你就会明白如何设置定位。希望你能完成剩下的工作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal-content{
      position: relative;
      width:50%;
      height:50%;
    }
    #modal-image{
      width:100%;
      height:auto;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

更新代码（作为要求）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal{
          width:100vw;
          height: 100vh;
      }
    #modal-content{
      position: relative;
      width:35%;
      height:90%;
    }
    #modal-image{
      width:100%;
      height:100%;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

在图像旁边定位按钮

Positioning buttons next to image

html

javascript

css

position