How to add a fixed margin on the top of the page

StackOverflow https://stackoverflow.com/questions/22821157

  •  26-06-2023
  •  | 
  •  

سؤال

At first I thought it would be a simple fix, then I started losing brain cells by the minute.

I am providing a CODEPEN HERE

Basically, I have two elements on the top of the page and they must remain fixed, while the bottom of the page (the content) scrolls naturally, without underlapping the fixed elements.

Any ideas?

The HTML

  <body >
        <div class="wrapper">
        <div class="container">
        <div class="sidebarmenu">
            <ul class="sidebarmenu1">
                <li><a href="index.html">Home</a></li>
                <li><a href="1.html">Info</a></li>
                <li><a href="11.php">Contact Us</a></li>
                <li><a href="2.php">Page 2</a></li>
                <li><a href="3.php">Page 3</a></li>
                <li><a href="4.php">Page 4</a></li>
                <li><a href="5.php">Page 5</a></li>
                <li><a href="6.php">Page 6</a></li>
            </ul>    
        </div>
        <div class="banner" >
            <img style="" alt="logo text" src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif" />            
        </div>
        <div class="spacer"></div>
        </div>
        </div>
        <div class="mainContent" >
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.<br><br>

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
            </div>
     </body>

The CSS

      body {background-color: black; width: 980px; margin: 0px auto;} 
      .wrapper {width: 100%; } /*this shows the element fixed positioning is working */
      .container {width:100%; margin:0 auto; padding: 0px 15px; background-color: black; overflow:hidden} 

      .banner {margin: 15px 0px 0px 500px; position:fixed; }
      .spacer{background-color:black; height:290px;}
      .mainContent { color:white; z-index:-1; margin-top:20px; width: 980px; overflow:hidden}

       /* sidebar */
       .sidebarmenu {float: left; background-color:Black; position:fixed; margin: 15px; }

       .sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 180px; border-bottom: 1px solid #ccc;}

       .sidebarmenu ul li a{display: block;overflow: auto;color: black;text-decoration: none;padding: 6px;border-bottom: 1px solid #778;border-right: 1px solid #778;} 

       .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: #c0c0c0;}

       .sidebarmenu ul li a:visited{color: white;}

       .sidebarmenu ul li a:hover{background-color: black;color:red;}
هل كانت مفيدة؟

المحلول

To trick to solving this problem is that instead of separately declaring fixed positions for sidebar and the banner, group them under a common parent element whose position is set to fixed. You can then give the parent element a background colour to allow it to mask any content that comes under it.

See your revised example ported over to a JSFiddle: http://jsfiddle.net/88Sf9/1/

The revised CSS rules are as follow:

.wrapper {
  width: 100%;
  position: fixed;
}
.container {
  width:100%;
  margin:0 auto;
  padding: 0px 15px;
  background-color: black;
  overflow:hidden;
} 
.mainContent {
  color: white;
  padding-top: 290px;
  width: 980px;
}

Some notes:

  • You don't need to declare a negative z-index for the .mainContent
  • You can safely remove the overflow: hidden; declaration

I have also applied a top padding to your main container, so that the content will be padded away from the fixed elements at the top of the viewport when your scroll position along the y-axis is 0 (i.e. when you are at the top of the page).

However, the solution will not work if you are handling a container with dynamic background, e.g. images or gradients. For that case, you might want to look into using CSS masks, which suffers from lack of cross-browser support and standardization.

نصائح أخرى

Put a big black fixed box behind the two elements.

Just add this:

.mainContent {
    background-color: #000;
    position: relative;
    z-index: 10;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top