HTML按钮和div出现在导航栏上但使用z-index中断动画

作者: 蜡笔小辛
发布时间: 2025-03-12 03:36:44 (1天前)
转自：

3 条回复

0#
回复此人
是吗@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我已经添加了 <code> z-index:3 </code> 至 <code> .sticky </code> 上课，看看下面的片段。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> body { background-color: rgb(30, 21, 120); margin: 0; padding: 0; } p { color: white; font-size: 20px; display: inline; padding: 20px; } div.package { position: relative; border: 4px solid white; border-radius: 70px; margin: 60px 0 60px 0; background-color: rgb(37, 110, 194); padding: 40px; transition-duration: 0.4s; } p.package { color: white; padding-left: 3vw; font-size: 2vw; text-align: center; } div.package:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 35px 60px 0 rgba(0,0,0,0.19); } .purchase { float: right; width: 20vw; height: 75px; background-color: rgb(10,27,64); color: white; border-color: rgb(24,146,40); position: relative; bottom: 17px; border-radius: 30px; border-style: solid; border-width: 5px; transition-duration: 0.4s; font-size: 2vw; } .purchase:hover { z-index: 2; background-color: rgb(116,164,242); color: black; width: 24vw; } .purchase_b { display: none; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(10,10,10); top: 0; } .navcont { margin: 0; position: relative; float: left; } .navcont a { margin: 0; position: relative; display: block; color: white; font-size: 20px; text-align: center; padding: 5vh 7vw; text-decoration: none; border-right: 1px solid rgb(50,50,50); border-left: 1px solid rgb(50,50,50); } .navcont a:hover { transition-duration: 0.3s; background-color: rgb(30,30,30); } .navcont a:active { background-color: rgb(9,194,36); } #navbarIMG { margin: 0; } .sticky { position: sticky; position: -webkit-sticky; top: 0; z-index:3 } @media screen and (max-width: 600px) { .purchase_b { position: absolute; text-align: center; display: block; } button.purchase { width: 100%; bottom: 10px; } p.package { bottom: 100px; font-size: 2.65vw; } .package { height: 70px; } .purchase:hover { background-color: rgb(116,164,242); color: black; width: 100%; } p { font-size: 10px; padding: 0; } .navcont a { padding: 3vh 3vw; } } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My site</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="sticky"> <ul class="navbar"> <li class="navcont"><a href="index.htm">Home</a></li> <li class="navcont"><a href="#about">About</a></li> <li class="navcont"><a href="#purchase">Purchase</a></li> <li class="navcont" style="float: right;"><a href="#contact">Contact</a></li> </ul> </div> <br> <br> <br> <br class="purchase_b"> <br class="purchase_b"> <div class="package"> <p class="package">Recommended Package: Standard Package | Only $20 per month!</p> <br class="purchase_b" /> <br class="purchase_b" /> <button value="Purchase" class="purchase" style="cursor: pointer;">Purchase</button> </div> <div class="package"> <p class="package">Popular Choice: Premium Package | Only $35 per month!</p> <br class="purchase_b" /> <br class="purchase_b" /> <button value="Purchase" class="purchase" style="cursor: pointer;">Purchase</button> </div> </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我改变了 <code> sticky </code> css代码中的类。 </p> <pre> <code> .sticky { position: fixed; z-index: 5; width: 100%; } </code> </pre> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> body { background-color: rgb(30, 21, 120); margin: 0; padding: 0; } p { color: white; font-size: 20px; display: inline; padding: 20px; } div.package { position: relative; border: 4px solid white; border-radius: 70px; margin: 60px 0 60px 0; background-color: rgb(37, 110, 194); padding: 40px; transition-duration: 0.4s; } p.package { color: white; padding-left: 3vw; font-size: 2vw; text-align: center; } div.package:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 35px 60px 0 rgba(0, 0, 0, 0.19); } .purchase { float: right; width: 20vw; height: 75px; background-color: rgb(10, 27, 64); color: white; border-color: rgb(24, 146, 40); position: relative; bottom: 17px; border-radius: 30px; border-style: solid; border-width: 5px; transition-duration: 0.4s; font-size: 2vw; } .purchase:hover { z-index: 2; background-color: rgb(116, 164, 242); color: black; width: 24vw; } .purchase_b { display: none; } .navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(10, 10, 10); top: 0; } .navcont { margin: 0; position: relative; float: left; } .navcont a { margin: 0; position: relative; display: block; color: white; font-size: 20px; text-align: center; padding: 5vh 7vw; text-decoration: none; border-right: 1px solid rgb(50, 50, 50); border-left: 1px solid rgb(50, 50, 50); } .navcont a:hover { transition-duration: 0.3s; background-color: rgb(30, 30, 30); } .navcont a:active { background-color: rgb(9, 194, 36); } #navbarIMG { margin: 0; } .sticky { position: fixed; z-index: 5; width: 100%; } @media screen and (max-width: 600px) { .purchase_b { position: absolute; text-align: center; display: block; } button.purchase { width: 100%; bottom: 10px; } p.package { bottom: 100px; font-size: 2.65vw; } .package { height: 70px; } .purchase:hover { background-color: rgb(116, 164, 242); color: black; width: 100%; } p { font-size: 10px; padding: 0; } .navcont a { padding: 3vh 3vw; } } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My site</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="sticky"> <ul class="navbar"> <li class="navcont"><a href="index.htm">Home</a></li> <li class="navcont"><a href="#about">About</a></li> <li class="navcont"><a href="#purchase">Purchase</a></li> <li class="navcont" style="float: right;"><a href="#contact">Contact</a></li> </ul> </div> <br> <br> <br> <br class="purchase_b"> <br class="purchase_b"> <div class="package"> <p class="package">Recommended Package: Standard Package | Only $20 per month!</p> <br class="purchase_b" /> <br class="purchase_b" /> <button value="Purchase" class="purchase" style="cursor: pointer;">Purchase</button> </div> <div class="package"> <p class="package">Popular Choice: Premium Package | Only $35 per month!</p> <br class="purchase_b" /> <br class="purchase_b" /> <button value="Purchase" class="purchase" style="cursor: pointer;">Purchase</button> </div> </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论