Prevent an element from covering another [closed]

by

There are two solutions I can think of quickly off the top of my head. You can either give the #headercontainer element a z-index CSS property…

#headercontainer {
    /* ... other CSS ... */
    z-index: 1000;
}

… or you can do it the way I think it should be done…

#headercontainer {
    /* ... other CSS ... */
    position: fixed;
    top: 0px;
}

#contentcontainer {
    /* ... other CSS ... */
    margin-top: 125px; /* this should be at least the height of the header */
}

In the second solution, you don’t have to worry about which element is hovering over which other element. The #contentcontainer element is properly pushed down under the #headercontainer element so that they have no overlap.

More Related Contents:

  1. Why does position:relative; appear to change the z-index?
  2. Minimum and maximum value of z-index?
  3. Positions fixed doesn’t work when using -webkit-transform
  4. Why does z-index not work?
  5. Position an element relative to its container
  6. css “left” not working
  7. How does the z-index property really work?
  8. Overlapping/overlaying multiple inline images
  9. Flexbox, z-index & position: static: Why isn’t it working?
  10. I have position but z index is not working
  11. Using z-index to get div above another div
  12. Floating Div Over An Image
  13. click link below a higher z-index div [duplicate]
  14. Trying to work on responsiveness of login form
  15. One flex/grid item sets the size limit for siblings
  16. CSS Pseudo-classes with inline styles
  17. How to apply a style to an embedded SVG?
  18. How do I get this CSS text-decoration override to work?
  19. Browser Caching of CSS files
  20. Flexbox and Internet Explorer 11 (display:flex in ?)
  21. How to change scroll bar position with CSS?
  22. Bootstrap: add margin/padding space between columns
  23. Changing highlight color
  24. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  25. Why isn’t position:sticky with left:0 working inside a scrollable container?
  26. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  27. Why doesn’t width/height work with non positioned pseudo elements?
  28. What is the best way to move an element that’s on the top to the bottom in Responsive design
  29. CSS way to horizontally align table
  30. Using sprites with IMG tag?

Leave a Comment