Home/ Questions/Q 7522371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T02:30:12+00:00

I think I’ve lost my head over the past few days. Currently finalizing my

  • 0

I think I’ve lost my head over the past few days. Currently finalizing my site and thought I would add a fixed header ribbon at the top of my pages just to add a little aesthetics to it. The ribbon displays fine but when scrolling the pages all the content under the ribbon div seem to scroll over the ribbon instead of under the ribbon. Im not sure if I just missed something in my styling or if this is a problem with my markup.. or both :/

markup looks like the following:

<body onunload="" class="">
<div id="ribbon" class="ribbon"></div>
<div id="container">
<div id="wrapper">
<div id="titleRow">
<hr />
  <div id="">
    <div id="primary"><script type="text/javascript">  
        Cufon.replace('#primary'); 
    </script><a href="">Text Placement</a>
    </div>
  </div>

<ul id="navigation">
    <li><a href="/portfolio" title="Portfolio" class="siteNav">Port</a></li>
    <li><a href="/profile" title="About" class="siteNav">About</a></li>
    <li><a href="/contact" title="Contact" class="siteNav">Contact</a></li>
    <li><a href="" title="Blog" class="siteNav">Blog</a></li>
</ul>


<div id="content"><hr />
    <div id="workHolder" class="tier590">
        <h2><a href="" title="View my projects" class="pageTitle siteNav">My Work</a></h2>
        <ul id="workList">

My css is set with position: fixed, width: 100%, height: 6px, and background-color:#000

Any help on this so that I can get things under the ribbon when scrolling would be appreciated. Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting your z index to 999.

    #ribbon {
position: fixed;
width: 100%; 
height: 6px;
background-color:#000;
z-index:999;
}
    • 0