Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div disappears on positioning it fixed

My html is like this-;

<div class="wrapper">
  <div class="header">
    this is the header
    <div class="hdr-lnks">
      <a href="#">home</a>
    </div>
  </div>
</div>

My css is this:

.hdr-lnks {
    position:fixed;
}

Why when I set position: fixed, does the div disappear?

like image 506
bhawin Avatar asked Sep 11 '13 17:09

bhawin


People also ask

Why is position fixed not working?

Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.

How do I keep my Div fixed?

A pinned-down menu The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.

How do I fix fixed position in CSS?

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.

What is the difference between absolute and fixed positioning in CSS?

Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.


1 Answers

You might have to declare where on the page you want it fixed.

For example, if you want it stuck to the top-left part of the page, your code might look like:

HTML

<div class="wrapper">
  <div class="header">
    this is the header
    <div class="hdr-lnks">
      <a href="#">home</a>
    </div>
  </div>
</div>

CSS

.hdr-lnks {
  position:fixed;
  top:0;
  left:0;
}

Here's a jsFiddle that illustrates it.

like image 180
Jason Avatar answered Sep 30 '22 17:09

Jason