屏幕顶部显示的 span 消息答案

【问题标题】：span message shown at the top of screen屏幕顶部显示的 span 消息
【发布时间】：2012-03-26 00:52:17
【问题描述】：

我有一个内部有一个跨度的 div，它将在网页上显示一条消息。我希望该消息显示在用户在页面中的任何位置的顶部。因此，假设用户在页面底部一直滚动，我希望该消息在他们可以在页面上看到的最高点显示给他们。感谢您的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

我相信你正在寻找

position:fixed

这里有一个小示例：http://jsfiddle.net/8APrp/1/

【讨论】：

【解决方案2】：

您需要在 CSS 中为您的 div 使用 position:fixed。

【讨论】：

你有我可以查看的示例页面吗？
您可以在这里查看静态、绝对、固定和相对的区别：w3schools.com/cssref/… 唯一的缺点是不允许您更改值。但你应该明白这一点。
在示例中要查看 Fixed 的实际效果，您需要将浏览器窗口更改为非常小，以便您可以滚动并仍然看到红色框。

【解决方案3】：

是的位置：固定示例在这里http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

【讨论】：

【解决方案4】：

很抱歉，但是：位置：固定并非所有浏览器都支持。更好的选择如下：

<html>
    <head>
    </head>
        <body>
        <div id='top_message'></div>
        <div id='main_container'></div>
        </body>
</html>

CSS：

body
{
    overflow:hidden;
}

#top_message
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:30px;
    display:block;
}

#main_conatainer
{
    position:absolute;
    top:30px;
    left:0px;
    width:100%;
    height:100%;
    overflow:scroll;
}

【讨论】：

如您所见，我们创建了 2 个容器，1 个用于消息 div，另一个用于网站的主要内容。这样做需要更长的时间，但它确保与所有浏览器和大多数 DOCTYPES 的兼容性