Html 如何制作固定的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2151048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a fixed div?
提问by taabouzeid
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>
回答by Gabriele Petrioli
It works fine in FF and Chrome ..
它在 FF 和 Chrome 中运行良好..
older versions of IE did not support position:fixedcorrectly .. not sure about latest version..
旧版本的 IE 无法position:fixed正确支持.. 不确定最新版本..
Also make sure you have a doctype defined ..
还要确保你定义了一个文档类型..
回答by vamsidhar Reddy Eguvapalli
.tooltip {
width: 200px;
position: fixed;
bottom:0px;
right:0px;
}
回答by dpb
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.
似乎对我有用....我相信在 IE7 和更高版本中，您将需要定义一个文档类型，如果您不知道从哪里开始，请搜索“怪癖模式”。
I don't think IE6 supports position:fixed.
我认为 IE6 不支持 position:fixed。
回答by Paul D. Waite
Huh, should work. Maybe remove top: auto?
呵呵，应该可以。也许删除top: auto？
(It won't work in IE 6 though, as IE 6 doesn't support position: fixed.
（不过它在 IE 6 中不起作用，因为 IE 6 不支持position: fixed.
回答by Nick Larsen
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.
您的 html/css 仅在 IE 中损坏。更改position: fixed;为position: absolute;，它应该更像您想要的那样工作。
You can also apply the doctype element:
您还可以应用 doctype 元素：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by Devanand
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.
- 写DOCTYPE但是过渡的！
- IE6 不支持“position:fixed”的 CSS 属性......所以你最好使用“position:absolute”......所有其他属性保持不变。
回答by user1959021
That all answers have "big codes" Why just dont add "fixed" to div element Like this:
所有答案都有“大代码” 为什么不向 div 元素添加“固定”像这样：
div position: fixed;
And that"s it :D Hope it works for you
就是这样 :D 希望它对你有用
回答by Ravi Chauhan
<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>
回答by Ravi Chauhan
any position related issue then view this link you have get quick solutions.
任何与职位相关的问题，然后查看此链接，您将获得快速解决方案。
http://learnlayout.com/position.html
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.
固定元素相对于视口定位，这意味着即使页面滚动它也始终保持在同一位置。与relative 一样，使用top、right、bottom 和left 属性。
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:
我相信您已经注意到页面右下角的固定元素。我允许你现在关注它。这是将它放在那里的 CSS：
.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;
}
回答by Erik ?sterling
Something like this should work
这样的事情应该工作
<style>
#myheader{
position: fixed;
left: 0px;
top: 95vh;
height: 5vh;
}
</style>
<body>
<div class="header" id = "myheader">
</body>
