时间戳

首页 > 解决方案 > 定位绝对元素不可见

html - 定位绝对元素不可见

问题描述

我正在尝试向我的滑块添加箭头，但箭头未显示在页面上，当我刷新页面时，我可以看到它们一秒钟然后消失 - 可能导致此问题的原因是什么？

.slider {
  position: relative;
  z-index: 10;
}

.next {
  position: absolute;
  top: 0;
  right: -120px;
  z-index: 1111;
}

.prev {
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 1111;
}
<div class="slider">
  <div>slide</div>
  <img src="prev.svg" class="prev">
  <img src="next.svg" class="next">
</div>

标签： htmlcss

解决方案

我举个.main-content例子。因为.slider元素超出了屏幕。

编辑：您可以根据需要更改宽度.slider。

.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slider {
    position: relative;
    z-index: 10;
    width: 300px; /* your option */
}

.next {
    position: absolute;
    top: 0;
    right: -120px;
    z-index: 1111;
    height: 85px;
    width: 85px;
}

.prev {
    position: absolute;
    top: 0;
    left: -120px;
    z-index: 1111;
    height: 85px;
    width: 85px;
}
<div class="main-content">
    <div class="slider">
        <div>slide</div>
        <img src="https://www.w3schools.com/w3css/img_avatar3.png" class="prev">
        <img src="https://www.w3schools.com/w3css/img_avatar3.png" class="next">
    </div>
</div>

推荐阅读