Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

postion absolute but not overlap other objects – Artificial Intelligence

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.

enter image description here

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;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    as someone in comment mention. Add z-index with positive number to a navbar.

    .my-navbar {
.
.
.
z-index: 1;

    }


  2. 0

    here is the idea of the linear-gradient and aside a grid-template instead absolute position , also a mediaquerie to reassign cells to the content on lower screen res:

    possible example:

    header {
  background: linear-gradient( 280deg, #ffe100 247px, #000 250px 360px, #ffe100 363px);
}

header,
nav {
  display: grid;
  grid-template-columns: minmax(10em, 20%) 1fr 9em 9em;
}

nav {
  grid-row: 1;
  grid-column: 1 / span 4;
}

nav a {
  color: white;
  font-size: 2em;
  margin: 0 0.75em;
}

nav a:nth-child(2) {
  grid-column: 3;
}

.about-wrapper {
  grid-row: 1;
  grid-column: 2;
  width: 450px;
  max-width: 30vw;
}

cite {
  display: none;
}

@media (max-width: 768px) {
  header,
  nav {
    grid-template-columns: auto auto 9em 9em;
  }
  .about-wrapper {
    width: 100%;
    max-width: 90vw;
    margin: auto;
    filter: invert(75%);
    grid-row: 3;
    grid-column: 1 / span 4;
  }
  cite {
    color: #0077cc;
    filter:hue-rotate(180deg);
    display: inline-block;
    font-weight:bold;
  }
}
    <header class="page1" id="home">
  <nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">Contact</a>
  </nav>
  <div class="about-wrapper">
    <div class="about-text">
      <p class="fs-45">Hi, I'm John <cite> and you want to see that page in full page mode too</cite>.</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>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search