Trouble with positioning elements

Question

In my page i\'m having trouble with getting the right position with my element outside of the header div. I want it to automatically position after/below the div not inside it.<

Answer 1

The element .header has been removed from the natural document flow, so the space it had occupied before is no longer occupied - consider this element as no longer part of or interacting with sibling elements. This is why the h1 element appears to be "inside" of this element, it is actually below it.

To resolve this common issue, you would need to account for the space (height) this absolutely positioned element would've taken in the DOM had it remained part of the normal document flow.

In this particular instance, this value is dynamic; the height of the element will vary, you will need to use relative length values as well (like percentage values) to offset this space.

Consider declaring margin or padding properties on the appropriate element. In this case, the better option would probably be declaring a padding-top property on the body element, e.g:

body {
    padding-top: 25%; /* adjust accordingly to suit requirements */
}

Note: if necessary, experiment with adjusting this property value accordingly for various resolutions using @media queries

Code Snippet Demonstration:

/* Additional */
body {
    padding-top: 25%; /* adjust accordingly to suit requirements */
}

.header {
  left: 0;
  top: 0;
  height: 50%;
  position: fixed;
  right: 0;
  z-index: -1;
}

.pic1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.menu {
  float: right;
  margin-right: 30px;
  margin-top: 10px;
}

.font {
  color: gray;
  text-decoration: none;
  font-size: 20px;
}

h1 {
  color: black;
}

  
  
  



  

    

      HOME
      SHOP
      ABOUT US
      CONTACT
    
    
  
  
test