如何制作固定的div？答案

【问题标题】：How to make a fixed div?如何制作固定的div？
【发布时间】：2011-01-10 04:45:53
【问题描述】：

我正在尝试将框固定在页面的右下边框，并且不会随着页面向下滚动而移动。但这对我不起作用，不知道为什么。这是我的代码：

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

【问题讨论】：

很适合我。即使 top 和 left 的 auto 值不是强制性的。有什么问题？您使用哪种浏览器进行测试？

标签： css html fixed

【解决方案1】：

它在 FF 和 Chrome 中运行良好..

旧版本的 IE 不正确支持 position:fixed.. 不确定最新版本..

还要确保你定义了一个 doctype ..

【讨论】：

【解决方案2】：

嗯，应该可以的。也许删除top: auto？

（但它在 IE 6 中不起作用，因为 IE 6 不支持position: fixed。

【讨论】：

【解决方案3】：

似乎对我有用....我相信在 IE7 和更高版本中，您需要定义一个文档类型，如果您不知道从哪里开始，请搜索“quirks mode”。

我认为 IE6 不支持 position:fixed。

【讨论】：

你说得对，先生，如果你想节省一些字节，使用绝对定位是可行的。

【解决方案4】：

您的 html/css 仅在 IE 中损坏。从position: fixed; 更改为position: absolute;，它应该更像你想要的那样工作。

你也可以应用 doctype 元素：

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

【讨论】：

【解决方案5】：

是的，需要注意两件事

写 DOCTYPE 但只是过渡的！
IE6 不支持“position:fixed”的 CSS 属性...所以最好使用“position:absolute”...所有其他属性保持不变。

【讨论】：

【解决方案6】：

所有答案都有“大密码” 为什么不将“固定”添加到 div 元素像这样：

div position: fixed;

就是这样 :D 希望对你有用

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

任何与职位相关的问题，然后查看此链接，您将获得快速解决方案。

http://learnlayout.com/position.html

已修复

固定元素是相对于视口定位的，这意味着即使页面滚动，它也始终保持在同一个位置。与 relative 一样，使用 top、right、bottom 和 left 属性。

相信您已经注意到页面右下角的固定元素。我现在允许你关注它。这是放置它的 CSS：

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

相对

relative 的行为与 static 相同，除非您添加一些额外的属性。

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

绝对

absolute 是最棘手的位置值。 absolute 的行为类似于 fixed，除了相对于最近的定位祖先而不是相对于视口。如果一个绝对定位的元素没有定位的祖先，它使用文档正文，并且仍然随着页面滚动而移动。请记住，“定位”元素的位置是除静态之外的任何内容。

这是一个简单的例子：

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

【讨论】：

【解决方案9】：

这样的东西应该可以工作

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

【讨论】：

【解决方案10】：

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

【讨论】：