8

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

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

10 回答 10

11

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

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

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

于 2010-01-27T23:19:59.540 回答
4 
.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}
于 2019-08-29T09:09:40.563 回答
2

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

我不认为 IE6 支持位置：固定。

于 2010-01-27T23:23:08.160 回答
2

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

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

于 2010-01-27T23:21:23.437 回答
1

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

您还可以应用 doctype 元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2010-01-27T23:24:39.280 回答
1

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

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;
}
于 2015-02-18T05:16:05.760 回答
1

是的，需要注意两件事

  • 写 DOCTYPE 只是过渡的！
  • IE6 不支持“position:fixed”的 CSS 属性...所以最好使用“position:absolute”...所有其他属性保持不变。
于 2011-10-06T20:04:27.193 回答
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>
于 2015-02-18T05:11:02.670 回答
1

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

div position: fixed;

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

于 2013-01-08T17:54:53.577 回答
1

像这样的东西应该工作

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>
于 2019-03-09T07:35:47.550 回答