我正在制作 2 只眨眼的影片。但是當我滾動頁面時，它們會出現在我的導航欄頂部。如果沒有影片，它就不會這樣做。如何讓影片在導航欄下運行？有些帖子提到了 z-index，但我似乎無法讓它發揮作用。我在這里復制了這個問題：Vue SFC Playground
uj5u.com熱心網友回復：
我已將您的代碼編輯如下：
<script setup>
</script>
<template>
<div class="nav">
navigation bar
</div>
<div class="face">
<div class="eyes">
<div></div>
<div></div>
</div>
</div>
<div class="content">
</div>
</template>
<style>
@keyframes blink {
0% {transform: scaleY(0.1) scaleX(1.4);}
5% {transform: scaleY(1) scaleX(1);}
10% {transform: scaleY(0.1) scaleX(1.4);}
15% {transform: scaleY(1) scaleX(1);}
}
.face {
height: 100px;
background-color: black;
padding: 20px;
margin: 50px 100px;
}
.eyes {
display: flex;
flex-direction: row;
margin: 0 100px;
justify-content: space-between;
}
.eyes div {
width: 15px;
height: 20px;
background-color: white;
border-radius: 5px;
animation: blink 3s linear 0.0001s infinite;
}
.nav{
background-color: pink;
padding: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.content {
height: 1000px
}
</style>
在這里，我添加了一個z-index: 100，以便導航欄始終保持在頂部。如果對您有幫助，請點贊并標記為已接受！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476125.html