我不想添加p這樣的。我可以添加它，但是當我使用 margin-top 放下它時，它會像這樣影響上面的元素。我不知道如何解決這個問題。謝謝你。
HTML。
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
CSS：
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[] {
font-size: 30px;
color: $PINK;
}
p[] {
margin-top:180px;
font-size: 10px;
}
}
}
}
uj5u.com熱心網友回復：
position: absolute;是你的朋友...
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
position: relative;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[] {
font-size: 30px;
color: $PINK;
}
p[] {
margin-top:180px;
font-size: 10px;
position: absolute;
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461977.html