CODEWITHSUNDEEP
htmlcss
Andrew Smith
Andrew Smith

Reputation: 310

Content visible in header when scrolled

I have a simple header and body php page. However, when I scroll, the content is visible behind the 'Hi' header.

<style type="text/css">
  #header {
    position:fixed;
    z-index:1;
  }
  #body {
    position:relative;
    z-index:2;
  }

</style>

<header> 

<div class="fixed">   
  <h1>  Hi <?php $_POST ["user"] ?>  </h1> 
    <p>Your list: </p>
  <p>&nbsp;</p>
</div>
</header>

<body>

<link href="stylesheet2.css" rel="stylesheet" type="text/css">


  <?php include_once("analyticstracking.php") ?> 

  <?php

echo "<p> You are gluten free<br/>"; //AND THE REST OF THE CONTENT?>

Does anyone know how to fix this? I have tried a few things. I think it might be a really simple answer. I would appreciate any ideas.

Upvotes: 2

Views: 302

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157294

First of all I would like to say that your markup is completely invalid, you cannot use header tag outside the body tag, so first nest that inside the body and as far as the content visibility goes, you need to assign some background-color to your header element.

Also, place the link tag between head tags, pick up the document level style block, place it in between the body tags, or between the head tags.

Not related to the answer, but just kinda bonus, if you resize your browser, you will see that position: fixed; element will scroll horizontally as well, inorder to prevent that, consider using jQuery, which will set the element to position: absolute; and on horizontal scroll, it will keep changing the top property value.

Demo (Credits)

Upvotes: 4

Related Questions