如何将HTML/CSS动画箭头元素放置在头部轮播图的上方而非下方

问题原因 #

你之前设置的left、bottom属性未生效，是因为元素默认position为static，该定位模式下偏移属性不会生效；且箭头父容器未设置定位上下文，即使强行加绝对定位也会相对于整个页面偏移，无法固定在轮播图范围内。

解决方法 #

仅需修改CSS部分代码即可，无需改动HTML和JS：

• 给轮播外层容器添加相对定位，作为箭头的定位参照
• 给箭头元素添加绝对定位、层级属性，设置对应的偏移值

修改后的完整CSS代码如下：

/* 给轮播容器添加相对定位，作为定位上下文 */
.w3-content.w3-section {
  position: relative;
}

.downArrow{
  background-color: transparent;
  text-align: center;
  /* 新增定位相关样式 */
  position: absolute;
  left: 50%; /* 水平居中定位 */
  bottom: 30px; /* 可自行调整距离轮播图底部的高度，数值越大越靠上 */
  transform: translateX(-50%); /* 修正水平居中偏移 */
  z-index: 10; /* 确保箭头显示在轮播图上层不被遮挡 */
}
.bounce {
  background-color: transparent;
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

参数调整说明 #

• 要调整箭头的水平位置，可修改left属性的数值
• 要调整箭头距离轮播底部的高度，可修改bottom属性的数值，数值越大箭头越靠上

内容的提问来源于stack exchange，提问作者Gianluca