【发布时间】：2021-01-07 19:05:00
【问题描述】：
我已经问过similar 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 中。
【问题讨论】：
-
如果您能够创建一个minimal, reproducible example，那将会很有帮助。这样我们就可以体验您的代码，而无需想象它会是什么样子。尝试省略您的问题不需要的代码。
-
我编辑了我的问题。我希望现在更容易理解。
-
在
#modal-content样式中尝试添加position: relative。它根本不会干扰包装器，但它会设置子代相对于它的位置，而不是它的父代。 -
我将这一行添加到#modal-content，但它根本没有改变任何东西。我需要添加任何其他样式属性吗？
标签： javascript html css position