Question 42893 in Html Question posted in
Some basic documentation can be found here.

How to fix two individual div sticky in Html

I have menu div in our site and we hav fixed this div through position:fixed css. Now we are creating another div at the top of menu div and would like to fix this as well. However when we are trying to add position:fixed css on this then it is overlapping by menu div.

<div class="top">
Div 1
</div>
<div class="menu">
Menu div
</div>

Could someone assist me on this ?

I have tried to add position: fixed on both div and tried other way as well but div is overlapping on each other.

Tags:

3

Answers


  1. 0

    I hope I have understood your question correctly. If I were you, I would create a fixed wrapper and then you can copy your two div blocks into it. See example:

    .fixed {
  position: fixed;
  width: 100%;
}

.top {
  background: green;
}

.menu {
    background: yellow;
}
    <div class="fixed">
  <div class="top">
    Div 1    
  </div>
  <div class="menu">
  Menu div
  </div>
</div>
    Login or Signup to reply.
  2. 0

    try to add

     top:50px; //or whatever value you want

    to the div that you want to be down to the other

    Login or Signup to reply.
  3. 0

    As it has already been suggested, you should make a fixed div and put your other div and the menu in it.

    Alternatively, if you really don’t want to make another div, maybe you could set both of them to fixed, and set a margin-bottom to the top div (or margin-top to the bottom one). I tried using margin:auto; but it doesn’t seem to work, probably because of the position:fixed;, so you should set the margin manually.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search