Menu
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?
506
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.
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.
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.
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.
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.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
