怎么让轮播图显示在导航栏后面

发布网友发布时间：2023-09-17 21:33

共1个回答

热心网友时间：2024-12-02 10:25

第一步先将需要轮播的图片导入。
一般在轮播图的下方会有对应图片的指定按钮，一个按钮对应一张轮播图，在点击它后，会显示相应的图片。
<header>

<div class="topIn">
<img src="./top_logo.png" alt="">
<img src="./top_kh.png" alt="">
</div>

<ul>
<li><img class="bannerImg" src="./banner1.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
<li><img class="bannerImg" src="./banner2.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
<li><img class="bannerImg" src="./banner3.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
</ul>

<ul class="btnUl">
<li class="btn1"></li>
<li class="btn2"></li>
<li class="btn3"></li>
</ul>
</header>
复制

注意一下几点：在最外面的header标签设置一个相对定位，让框框固定好。
相对定位在移动的时候是相对于它原来的位置，并且原来在标准流地位置继续占有，后面地盒子仍然以标准流的方式对待他。

logo和按钮都设置为绝对定位，绝对定位在移动的时候是相对于他的祖先元素来说的，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。重要的是，绝对定位不占有原先的位置，脱离标准流。原先的位置会被后面的元素占据。
就是说，因为他们是一直都显示的，让他们浮在轮播图上面。