在网页中推送内容
问题描述:
我将一个div浮动到窗口的顶部。但是,它覆盖了页面顶部的内容,也就是说,它不会压低页面的顶部。然而,我看到Stack Overflow在通知栏上这样做,因为它没有覆盖用户名/代表/链接。有没有我可以用CSS复制这种方法?在网页中推送内容
答
您可以将外部容器对象的上边距设置为浮动div的高度:
<div id="outerContainer">
... page content goes here ...
</div>
<div id="floatingNotification">
</div>
然后在CSS:
#floatingNotification
{
...
height: 20px;
}
#outerContainer
{
margin-top: 20px;
}
答
在堆栈溢出的情况下,我认为他们很有可能使用jQuery来操纵页面内容。我还没有探索的链接脚本,我也没有得到任何通知,检查着,但我大胆猜测,它是这样的:
$(document).ready(
function() {
var element = '<div id="notification"></div>';
var text = '<p>The text to show in the notification thingumabob.</p>';
$('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none');
if ('#notification') {
$('div#notification').slideDown('slow');
}
}
)
请注意,我是令人难以置信的新jQuery - 坦率地说,JavaScript一般 - 所以我有很多机会提出了一些可怕的错误。但是,经过测试,这个概念起作用。即使您想要添加的element
已浮动或绝对定位,slideDown()
似乎会处理移动页面内容以避免覆盖其他元素。不过,这可能会,也可能不会,但在我的设置中可能会有一些巧合。
答
答案取决于您是使用相对还是绝对定位的浮点数。如果它是绝对的,则将float div设置为例如{top:20px;}。如果它是相对的,请使用填充顶部,边距顶部(或顶部元素的边缘底部)。
在普通浏览器中哪些功能最好取决于整体情况。
您可以添加您用于浮动元素的代码吗? – Zac 2010-03-06 05:47:35
编辑添加'jQuery'标记,因为我相当肯定它是相关的。 – 2010-03-06 05:47:49