How to make a fixed div?

N

10

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>

Norge answered 27/1, 2010 at 23:13 Comment(1)

Works fine with me. Even if the auto values for top and left are not mandatory. What's the problem? Which browser do you use for testing? – Sneakbox 27/1, 2010 at 23:21

N

12

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

Nanananak answered 27/1, 2010 at 23:19 Comment(0)

F

7

.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}

Ferbam answered 29/8, 2019 at 9:9 Comment(0)

S

2

Huh, should work. Maybe remove top: auto?

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

Screen answered 27/1, 2010 at 23:21 Comment(0)

C

2

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.

Closemouthed answered 27/1, 2010 at 23:23 Comment(1)

You are correct sir, using absolute positioning works if you want to save some bytes. – Burka 27/1, 2010 at 23:26

B

1

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

Burka answered 27/1, 2010 at 23:24 Comment(0)

B

1

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.

Bulldoze answered 6/10, 2011 at 20:4 Comment(0)

M

1

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

Malmsey answered 8/1, 2013 at 17:54 Comment(0)

N

1

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

Nazarius answered 18/2, 2015 at 5:11 Comment(0)

N

1

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;
}

Nazarius answered 18/2, 2015 at 5:16 Comment(0)

J

1

Something like this should work

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

Jar answered 9/3, 2019 at 7:35 Comment(0)

Recommended topics

Hot tags