CODEWITHSUNDEEP
htmlcss
bonjofy
bonjofy

Reputation: 145

css position:fixed overlapping

My problem is really simple,

I just want to add a menu (navbar) to the side of my page, therfore I gave it position fixed. The problem with that is, that all html elements I try to add ignore it. Problem posistion

Upvotes: 0

Views: 1153

Answers (1)

Rounin
Rounin

Reputation: 29463

If you position an element with:

  • position: absolute; or
  • position: fixed

this removes the element from the document flow which means, as you've noticed, that all other elements will ignore that out-of-flow positioned element and appear over the top of it etc.

You can use padding and margin on other elements to ensure that they don't overlap the out-of-flow positioned element.

Working Example:

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  padding: 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 127);
}

main {
  margin-left: 156px;
}
<main>
  <h1>Main Page</h1>
  <p> This is the main part of the page.</p>
  <p>It has a <code>margin-left</code> of <code>156px</code>.</p>
</main>

<nav>
  <h2>Navigation</h2>
  
  <ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
  </ul>
</nav>

Upvotes: 3

Related Questions