Menu
I am trying to make box to be fixed in the lower right border of the page and doesn't move with the page scrolls down. But it's not working for me dunno why. Here is my code:
<html>
<head>
<style type="text/css">
.tooltip {
width: 200px;
position: fixed;
top:auto;
bottom:0px;
right:0px;
left:auto;
}
</style>
</head>
<body>
<div class="tooltip">
<div class="tooltip_top">1</div>
<div class="tooltip_con">2</div>
<div class="tooltip_bot">3</div>
</div>
</body>
</html>
305
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.
Method 1: Using the sticky value of the position property It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.
Step 2) Add CSS: To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
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 ..
112
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
