I’m currently working on my resume website. I want to add some design to it but i came with a problem. My svg design-item overlap navbar when scrolling down. If i set position to static it doesn’t overlap but then I can’t position it as I want.
HTML:
<section class="page1" id="home">
<div class="design-item">
<svg xmlns="http://www.w3.org/2000/svg" width="292.971" height="412.356" viewBox="0 0 292.971 412.356">
<line id="Line_6" data-name="Line 6" x1="206" y2="363" transform="translate(43.486 24.678)" fill="none" stroke="#2b2b28" stroke-width="100"/>
</svg>
</div>
<div class="about-wrapper">
<div class="about-text">
<p class="fs-45">Hi, I'm John</p>
<p class="fs-35">
I'm 19 years-old, computer science student. Mainly coding in python.
I'm a quick lerner and flexible person. I am currently intrested in Web Development,
Artificial Intelligence and Design
</p>
</div>
</section>
CSS:
/* NAV BAR */
.my-navbar {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 96%;
padding-left: 2%;
padding-right: 4%;
}
/* PAGE 1 */
.design-item {
position: absolute;
right: 250px;
bottom: -55px;
}
2
Answers
as someone in comment mention. Add z-index with positive number to a navbar.
}
here is the idea of the
linear-gradient
and aside agrid-template
insteadabsolute
position , also a mediaquerie to reassign cells to the content on lower screen res:possible example: