Css 如何制作固定div？_Css_Html_Fixed

Css 如何制作固定div？

css html

Css 如何制作固定div？,css,html,fixed,Css,Html,Fixed,我试图使框固定在页面的右下边框，并且不会随着页面向下滚动而移动。但我不知道为什么。这是我的密码： <html> <head> <style type="text/css"> .tooltip { width: 200px; position: fixed; top:auto; bottom:0px; right:0px; left:auto; } </style> </head> <body> &l

我试图使框固定在页面的右下边框，并且不会随着页面向下滚动而移动。但我不知道为什么。这是我的密码：

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


.工具提示{
宽度：200px；
位置：固定；
顶部：自动；
底部：0px；
右：0px；
左：自动；
}
1.
2.
3.

它在FF和Chrome中运行良好

旧版本的IE不支持

位置：已正确修复。。不确定最新版本
还要确保定义了doctype。
嗯，应该可以。可能会删除top:auto

（不过，它在IE6中不起作用，因为IE6不支持位置：fixed
似乎对我有效……我相信IE7和更高版本需要定义doctype，如果你不知道从哪里开始，请搜索“怪癖模式”
我认为IE6不支持position:fixed。
您的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">


是的，有两件事需要注意

写DOCTYPE，但要写过渡类型
IE6不支持CSS属性“position:fixed”…因此最好使用“position:absolute”…所有其他属性保持不变
所有答案都有“大代码”
为什么不在div元素中添加“fixed”
像这样：
div position: fixed;

就是这样：D
希望它对您有用

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

.标题{
宽度：100%；
高度：100px；
位置：固定；
顶部：0px；
左：0px；
}
1.
2.
3.
任何与职位相关的问题，然后查看此链接，您可以快速获得解决方案

固定的
固定元素相对于视口定位，这意味着即使页面被滚动，它也始终保持在同一位置。与相对元素一样，使用顶部、右侧、底部和左侧属性
我相信您已经注意到页面右下角的fixed元素。我现在允许您关注它。下面是放置它的CSS：
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

相对的
相对行为与静态行为相同，除非添加一些额外属性
.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

绝对值
绝对值是最复杂的位置值。绝对值的行为与固定值类似，只是相对于最近定位的祖先而不是相对于视口。如果绝对定位的元素没有定位的祖先，它将使用文档正文，并且仍然随着页面滚动而移动。请记住，“定位”元素“元素的位置是除静态以外的任何东西
下面是一个简单的例子：
.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

像这样的东西应该有用
<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>


#我的头{
位置：固定；
左：0px；
顶部：95vh；
高度：5vh；
}
对我来说很好。即使“顶部”和“左侧”的“自动”值不是强制性的。有什么问题吗？您使用哪种浏览器进行测试？您是对的，先生，如果您想节省一些字节，使用“绝对定位”是可行的。
.tooltip {
 width: 200px;
 position: fixed;
 bottom:0px;
 right:0px;
}