我创建了一个带有导航栏的网站。当我在图像上滚动并悬停时,它们在导航栏上重叠。在此处结帐的网站->website问题图像-> overlapping image
我试图将悬停代码移到顶部(根据优先级较低的顺序,但是没有用。我希望将图像悬停在导航栏下方时将其倾斜。
网站上使用的图像-> img
任何人都可以告诉您如何解决此问题,谢谢。
下面是css和html的代码
body {
margin: auto 0;
}
.zone {
/* padding:30px 50px; */
/* margin:40px 60px; */
cursor:pointer;
/* display: inline-block; */
color:rgb(252, 251, 253);
font-size:2em;
border-radius:4px;
border:5px solid rgba(0, 58, 8, 0.856);
/* transition: all 0.3s linear; */
}
/* NAV BAR */
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
text-transform: uppercase;
margin: 0;
}
li {
padding: 20px;
}
li:hover {
box-shadow: yellowgreen;
}
a {
color: #24011f;
text-decoration: none;
}
.main-nav li:last-child {
margin-left: auto;
}
@media only screen and (max-width: 900px) {
.main-nav {
padding: none;
font-size: 0.4em;
}
}
/* COVER */
.container {
display: flex;
/* width: auto; */
align-items: center;
justify-content: center;
height: 50vh;
}
/* petrify */
.cover {
width: 20rem;
}
/* GRID-wrapper */
.grid-wrapper {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill,minmax(300px,auto));
/* shape-outside: ellipse(45%); */
/* color: #febf04; */
}
.box > img {
width: 80%;
height: 100%;
}
.box {
background-color: rgb(0, 0, 0);
padding: 90px;
margin: 10px;
border-radius: 100%;
}
.box:hover {
transform: rotate(8deg);
/* transition: ; */
mask-position: center;
}
.zone:hover {
-webkit-box-shadow:rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0,0, 0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0..15) 0px -10px 20px;
}
.sticky {
position: fixed;
width: 100% ;
top: 0rem;
}
footer { /* footer */
display: flex;
align-content: center;
justify-content: center;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/****************************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav class="zone blue sticky">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Guide</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<div class="container zone">
<img class="cover" src="./img/undraw.png" alt="image9">
</div>
<div class="zone blue grid-wrapper">
<div class="box zone"><img src="./img/data_storage_2_2.png" alt="image1"></div>
<div class="box zone"><img src="./img/desktop_analytics_2.png" alt="image2"></div>
<div class="box zone"><img src="./img/files_2.png" alt="image3"></div>
<div class="box zone"><img src="./img/monitor_coding_2.png" alt="image4"></div>
<div class="box zone"><img src="./img/monitor_settings_2.png" alt="image5"></div>
<div class="box zone"><img src="./img/server_2_2.png" alt="image6"></div>
<div class="box zone"><img src="./img/server_3.png" alt="image7"></div>
<div class="box zone"><img src="./img/server_safe_2.png" alt="image8"></div>
</div>
<footer class="zone yellow">Zero => Mastery</footer>
</body>
</html>
您可以使用z-index属性来更改浏览器发生重叠时的处理方式。 https://www.w3schools.com/cssref/pr_pos_z-index.asp
在这种情况下,您可以更改“粘性” css类的z-index以获得所需的行为。
.sticky {
position: fixed;
width: 100%;
top: 0rem;
z-index: 100;
}