How to Make a Fixed Div

How to make a fixed div?

It works fine in FF and Chrome ..

older versions of IE did not support position:fixed correctly .. not sure about latest version..

Also make sure you have a doctype defined ..

Fixed Positioned Div Inside another Div

Then you don't want fixed positioning, but absolute positioning.

Set position: absolute; on the element that you want to position. Set position: relative; on the centered div so that it becomes a layer that you can position elements inside.

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

How to make a fixed div under another fixed div with tailwindcss

Just add bg-red-700 to the header class and bg-blue-700 to the nav class and your code works properly.

const navigation = document.getElementById("navigation");
const toggleNavigation = document.getElementById("toggleNavigation");

toggleNavigation.addEventListener("change", function() {
  navigation.classList.toggle("-translate-y-full");
});

<script src="https://cdn.tailwindcss.com"></script>
<header class="bg-red-700 p-4 border-b fixed top-0 left-0 right-0 z-10 relative">
  <div class="max-w-4xl mx-auto flex justify-between relative">
    <h1><a href="">Project</a></h1>
    <div id="toggleNavigation" class="">
      <label class="cursor-pointer flex flex-col w-5 h-5 justify-between overflow-hidden position">
        <input id="toggleNavigation" type="checkbox" class="peer appearance-none" />
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:rotate-[42deg]"></span>
        <span class="bg-black h-0.5 w-5 transition-all peer-checked:bg-opacity-0"></span>
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:-rotate-[42deg]"></span>
      </label>
    </div>
  </div>
</header>
<nav id="navigation" class="bg-blue-700 flex flex-col divide-y transition-all -translate-y-full fixed top-14 right-0 left-0">
  <a class="p-4" href="">Home</a>
  <a class="p-4" href="">About me</a>
  <a class="p-4" href="">Portfolio</a>
</nav>

div.container {  max-width: 100vw;  height: 100%;  margin: 0 auto;  padding: 0;  color: white;}
.site-header {  width: 80%;  text-align: right;  position: fixed;  right: 0;  float: right;  height: 100px;background-color: blue;}
.site-page {  display: inline-block;  float: right;  width: 80%;  height: 100%;  padding-top: 100px; /* height of header */background-color: green;}

/***********/
body { height: 100vh; width: 100vw; margin: 0; } /*need this, because page is empty*/
*, ::before, ::after {  box-sizing: border-box; /* padding and border won't increase size of the elements, namely .site-page */}

<div class="container">
  <header class="site-header">site-header</header>
  <div class="site-page">site-page</div>
</div>

*{     margin: 0px;}
#sidebar { /*Strictly Necessary */ position:fixed;  height: 100%; width:30%; margin: 0px;  
  /*Aesthetics*/  background: lightblue;   border-radius: 7px;  }

#rightSideWrapper { /*Strictly Necessary */ width:70%;  float: right;
 /*Aesthetics*/ background: black; }
header { /*Strictly Necessary */ position: fixed; width: 70%;  height: 100px; /*Adjust the hight to your purposes*/  /*Aesthetics*/ background: lightSalmon; border-radius: 7px;}
.ContentBox{ margin-top: 100px; /*The height of the   header*/ display:flex; flex-flow: row wrap;} 
main, section, footer {    /*Aesthetics*/  background: lightgray;   border-radius: 7px;   margin: 5px;   padding: 20px;}
main {  /*Strictly Necessary */  height: 400px;  order: 1;  flex: 0 1 100%;  }
section {  /*Strictly Necessary */   height: 400px;   order: 2;   flex: 0 1 100%; }
footer {  /*Strictly Necessary */  height: 100px;  order: 3;  flex: 0 1 100%; }

<html><!--...--> <head>  <meta charset="utf-8">  <title> Ghost </title>  <link rel="Stylesheet" href="css/style.css"> </head>   <body>      <div id="sidebar">   Side Content  </div>  <div id="rightSideWrapper">   <header>     Header    </header>      <div class="ContentBox"><!--. poner en minusculas.-->    <main>      Main Content     </main>
    <section>     Section Content    </section>
    <footer>      Footer     </footer>
   </div>     </div>
 </body> 
 
</html>