•  23-09-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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 ..

OTHER TIPS

Seems to be working for me.... I believe in IE7 and greater you will need to define a doctype, search for "quirks mode" if you don't know where to start on that.

I don't think IE6 supports position:fixed.

Huh, should work. Maybe remove top: auto?

(It won’t work in IE 6 though, as IE 6 doesn’t support position: fixed.

Your html/css is only broken in IE. Change from position: fixed; to position: absolute; and it should work more like you want it to.

You can also apply the doctype element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Yes, two things to take care of

  • Write the DOCTYPE but the transitional one!
  • the CSS property of "position:fixed" is not supported by IE6...so you would be better off using "position:absolute"...with all the other properties keeping same.

That all answers have "big codes" Why just dont add "fixed" to div element Like this:

div position: fixed;

And that"s it :D Hope it works for you

<html>
 <head>
 <style type="text/css">
.header {
 width: 100%;
 height:100px;
 position: fixed;
 top:0px;
 left:0px;
}
 </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>

any position related issue then view this link you have get quick solutions.

http://learnlayout.com/position.html

Fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used.

I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

relative

relative behaves the same as static unless you add some extra properties.

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

absolute

absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.

Here is a simple example:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Something like this should work

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>

.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top