jquery -在现有网页上插入标题部分

Question

我正在尝试注入一个横幅div

<div id='banner'></div>

在一个现有网页的顶部以这样的方式，当一个人滚动网页时，横幅仍然在顶部。同时，网页应该被横幅向下推倒，这样页面的每个部分都可以访问。

这是我的CSS：

#banner {
position:fixed; 
display:block; 
top:0px; 
background-color:#FFFFFF; 
width:100%; height:250px; 
border:2px solid; 
}

以下是我的jquery：

$("body").prepend("<div id='banner'></div>");

我尝试使用jquery查找所有已修复的div，并在执行上面的行之前将它们更改为相对的，但是横幅仍然不起作用。错误显示在以下图片https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing中

请帮帮忙。

我并不是在寻找广告收入，这只是一项实践任务。

Answer 1

这是我创建的一个jsFiddle。横幅div位于页面顶部。

它在滚动的时候保持在顶部。

HTML：

<div class="page">
</div>

css：

.oldBody
{
    width:100%;
    height: 3000px;
    background-color: navy;
    margin-top:250px;
}

#banner 
{
    position:fixed; 
    top:0px; 
    background-color:#FFFFFF; 
    width:100%; 
    height:250px; 
    border:2px solid; 
    z-index:10000;
}

联合来文：

$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");

Answer 2

请保持横幅div.z-索引的z-索引应被磨平，然后在该页上的其他div。

#banner {
position:fixed; 
display:block; 
top:0px; 
background-color:#FFFFFF; 
width:100%; height:250px; 
border:2px solid;
z-index : 99999 
}

Answer 3

我只想介绍一种创建元素的不同方法：

var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);

当您需要创建几个不同的元素时，使用jquery创建元素的这种技术非常方便。请注意，您还可以创建如下元素：

var $banner = $('<div/>').attr('id', 'banner');