页眉插图具有粘性位置,并且在滚动时覆盖了部分图像。我想在其中说“插图向下移动到它所覆盖的div。有谁知道我该如何解决这个问题?对不起,如果我的代码难以阅读,我很新。感谢您的帮助
body{
font-family: montserrat;
background-color: #70C1B3;
color: white;
}
#paint{
font-size: 7rem;
}
.resume{
text-align: right;
}
.name{
text-align: center;
}
.h1{
display: flex;
justify-content: center;
}
.sticky{
position: -webkit-sticky;
position: sticky;
top: 0px;
width: 100%;
height: 15%;
background-color: #247BA0;;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
text-align: center;
}
.container {
height: 800px;
}
.extra, .container {
width: 100%;
background-color: grey;
margin: auto;
}
#container{
height: 800px;
width: 100%;
background-color: grey;
margin: auto;
font-size: 2rem;
}
.extra {
height: 200px;
width: 100%;
}
.wrapper{
display: grid;
grid-template-column: 1fr 1fr 1fr;
grid-template-row: auto;
background-color: orange;
height: 100%;
grid-gap: 5px;
border: solid 2px;
grid-template-areas:
"a b c"
"d e f";
}
@media (max-width: 700px) {
.wrapper {
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f";
}
}
.box a {grid-item: a}
.box b {grid-item: b}
.box c {grid-item: c}
.box d {grid-item: d}
.box e {grid-item: e}
.box e {grid-item: f}
.box {
background-color: yellow;
border: solid 2px
}
#containercontainer {
width: 100%;
height: 20%;
}
#sticky{
position: -webkit-sticky;
position: sticky;
top: 0px;
margin: 0;
width: 100%;
height: 20%;
background-color: #31c39c;;
display: flex;
justify-content: center;
align-items: center;
}
#wrapper{
display: grid;
grid-template-column: 1fr 1fr 1fr;
grid-template-row: auto;
background-color: orange;
height: 100%;
grid-gap: 5px;
border: solid 2px;
grid-template-areas:
"a b c"
"d e f";
}
@media (max-width: 700px) {
#wrapper {
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f";
}
}
.box a1 {grid-item: a}
.box b1 {grid-item: b}
.box c1 {grid-item: c}
.box d1 {grid-item: d}
.box e1 {grid-item: e}
.box e1 {grid-item: f}
<div class="d4"> <p class="resume">Resume</p>
<h1 class="name">Title</h1></div>
<div class="d7"><h1 id="paint">Paint. Pencils. Pixels.
Code. Screen Printing.
Photography.</h1></div>
<br />
<div class="container">
<div class="sticky"><h1>Traditional Art</h1></div>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
</div>
<div id="containercontainer">
<div id="container">
<div id="sticky"><h1>Illustrations</h1>
</div>
<div id="wrapper">
<div class="box a1">A</div>
<div class="box b1">B</div>
<div class="box c1">C</div>
<div class="box d1">D</div>
<div class="box e1">E</div>
<div class="box f1">F</div>
</div>
</div>
</div>
</div>
<br />