javascript - CSS - 带有图像推子的绝对和相对位置
问题描述
我正在使用图像推子程序,但我不了解绝对定位。如果屏幕调整大小,我的图像会很好地褪色并按照我想要的方式调整大小。但我有两个问题。Div#2 被图像覆盖。我希望 div2 始终出现在图像 div 下方。另外,我在图像上有控制按钮。我希望他们在中间。我认为使用 top:50% 可以做到这一点,但事实并非如此。这是一个例子......
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
function nextSlide(){goToSlide(currentSlide+1);}
function previousSlide(){goToSlide(currentSlide-1);}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';}
var next = document.getElementById('next');
var previous = document.getElementById('previous');
next.onclick = function(){nextSlide();};
previous.onclick = function(){previousSlide();};
#slides {position: relative}
.slide{
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:auto;
min-height:300px;
object-fit:cover;
opacity: 0;
box-sizing:border-box;
transition: opacity 2s;}
.showing{opacity: 1;}
.controls{
background: transparent;
color: #fff;
font-size: 30px;
cursor: pointer;
border: 1px solid #555;
width: 30px;
position: absolute;
}
.controls:hover{ opacity:.5}
.fadenext{right: 10px; top: 50%;}
.fadeprev{left: 10px; top: 50%;}
<br><br>
<div id="slides">
<img src='https://www.panotools.org/dersch/Monp.JPG' class="slide showing">
<img src='https://www.panotools.org/dersch/StBp.JPG' class="slide">
<button class="controls fadeprev" id="previous"><</button>
<button class="controls fadenext" id="next">></button>
</div>
<div style='margin-top:40px;border:1px solid red;width:200px;height:100px'>
This is Div # 2</div>
解决方案
当您使用“顶部”样式时,使用基于百分比的位置是不可行的。因此,要实现您想要做的事情,请改用 margin-top 。如下所示:
.fadenext{right: 10px; margin-top: 25%;}
.fadeprev{left: 10px; margin-top: 25%;}
对于您的 div2,只需将其样式更改为:
margin-top: 50%
推荐阅读
- entity-framework-core - EF Core - 使外键可选
- cmake - 使用 CMake 从 gfortran 中找不到 MPI 库
- java - WsdlProject(); 无法转换为 com.eviware.soapui.config.DefaultEndpointStrategyConfig
- javascript - 如何使用 Node.js 中的 Stripe API 获取条带仪表板数据(净量、每位客户的支出等)(附图供参考)
- c# - 使用 Quartz 进行依赖注入(到构造函数中)(作业具有带参数的构造函数),在 MVC 中使用事件(按钮单击)启动和停止调度程序
- python - 从 csv 读取然后写入表的 DataFram 包含用于 cols 的空间
- mysql - 查询显示公用事业账单的结果,同时将账单表行转换为列,在 where 子句中,运算符之间”没有给出任何结果
- node.js - 无法运行 TS 节点 + ES 应用程序 - 获取 `ERR_UNKNOWN_FILE_EXTENSION` 或 `new ERR_MODULE_NOT_FOUND`
- google-apps-script - 如何在使用谷歌应用脚本创建的新复制谷歌工作表中保持受保护范围的相同权限?
- android - 协程流的奇怪行为