Question

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

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

Answer 1

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

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

还要确保定义了doctype ..

Answer 2

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

Answer 3

似乎对我有用....我相信IE7及更高版本你需要定义一个doctype，如果你不知道从哪里开始就会搜索“quirks模式”。

我认为IE6不支持position：fixed。

Answer 4

嗯，应该工作。也许删除top: auto？

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

Answer 5

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

Answer 6

是的，有两件事需要处理

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

Answer 7

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

div position: fixed;

就是这样：D 希望它适合你

Answer 8

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

Answer 9

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

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

<强>绝对

绝对是最棘手的位置值。绝对行为类似于固定，除了相对于最近的定位祖先而不是相对于视口。如果绝对定位的元素没有定位祖先，它会使用文档正文，并且仍然随页面滚动一起移动。记住，＆＃34;定位＆＃34; element是一个除静态以外的任何位置的元素。

这是一个简单的例子：

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

Answer 10

类似的事情应该起作用

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

如何制作一个固定的div？

10 个答案: