如何制作一个固定的div?

问题描述 投票:7回答:9

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

<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>
css html fixed
9个回答
10
投票

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

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

还要确保定义了doctype ..


2
投票

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

我不认为IE6支持position:fixed。


1
投票

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

(但它不适用于IE 6,因为IE 6不支持position: fixed


0
投票

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

0
投票

是的,要照顾两件事

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

0
投票

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

div position: fixed;

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


0
投票
<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>

0
投票

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

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

0
投票

这样的事情应该有效

<style>
    #myheader{
        position: fixed;
        left: 0px;
        top: 95vh;
        height: 5vh;
    }
</style>
<body>
    <div class="header" id = "myheader">
</body>
© www.soinside.com 2019 - 2024. All rights reserved.