我正在尝试将框固定在页面的右下边框中,并且不会随着页面向下滚动而移动。但它不适合我,为什么不知道。这是我的代码:
<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>
它在FF和Chrome中运行良好..
旧版本的IE没有正确支持position:fixed
..不确定最新版本..
还要确保定义了doctype ..
似乎对我有用....我相信在IE7和更高版本中你需要定义一个doctype,如果你不知道从哪里开始就搜索“怪癖模式”。
我不认为IE6支持position:fixed。
嗯,应该工作。也许删除top: auto
?
(但它不适用于IE 6,因为IE 6不支持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">
是的,要照顾两件事
所有答案都有“大代码”为什么只是不添加“固定”到div元素像这样:
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>
任何与位置相关的问题然后查看此链接您已获得快速解决方案。
http://learnlayout.com/position.html
固定
固定元素相对于视口定位,这意味着即使滚动页面,它也始终保持在同一位置。与相对一样,使用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;
}
绝对
绝对是最棘手的位置值。绝对行为类似于固定,除了相对于最近的定位祖先而不是相对于视口。如果绝对定位的元素没有定位祖先,它会使用文档正文,并且仍然随页面滚动一起移动。请记住,“定位”元素的位置是除静态之外的任何元素。
这是一个简单的例子:
.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>