滚动时,使相对位置的Div位于页脚div下方

时间:2012-06-25 14:45:44

标签: css html position overlay

我真的不太熟悉CSS和HTMl,所以请放轻松 我正在编辑购买的模板,我遇到了一个小问题,您可以查看它在这里的样子,并了解我的问题:https://dl.dropbox.com/u/10843829/SITE%20INFORBYTE/shortcodes-text.html

问题是: 我有侧边栏div,我使它与页面一起移动,其中“position:fixed”属性就是它的div ... 问题是,现在它滚动页脚div 。 我试着遵循这个:http://css-tricks.com/scrollfollow-sidebar/但它没有成功。

现在有一些代码可以更深入地理解我的问题。

源代码

<div class="grid_4 sidebar " style="position:fixed" id="sidebar">

侧边栏小部件容器 - CSS

    .sidebar h3 {
    font-size:14px;
    color:#333333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight:bold;
    margin-bottom:10px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #fff}

.sidebar .widget-container h3 {
    margin-left:40px}

.footer .widget-container h3 {
    font-size:15px;}

.footer .widget-container {
    color:#848484}

.footer .widget-container a {
    color:#fff}

.sidebar ul, .sidebar ol {
    margin:0;
    padding:0}

.sidebar ul li {
    list-style:none}

.sidebar_space {
    padding:10px }

.sidebar .box,
.sidebar .widget {
    margin-bottom:20px}

.sidebar .widget-container {
    font-size:13px;
    padding:20px;
    margin-bottom:30px;}

.sidebar .box .widget-container {
    padding:0}

.sidebar .widget-container ul {
    margin:0;}

.sidebar .widget-container ul li ul{
    margin:0 0 0 5px;}

2 个答案:

答案 0 :(得分:1)

将页脚的z-index设置为淫秽内容,例如:

z-index: 3000; 

这应该迫使它保持领先地位。或者,您可以尝试使用侧边栏的负值进行游戏,这也可以起作用。

答案 1 :(得分:1)

将您的页脚设置为position: relative;,然后给它z-index: 5000;,如下所示:

.footer {
    position: relative;
    z-index: 5000;
}