Question

我在一个绝对定位的div中创建一个带有横幅图像的响应式网站，然后使用顶部设置的文本的z-index属性将另一个绝对定位的div重叠。

这会导致页脚在这些元素下方消失。由于上面的div是响应式的，我不能在后面的div上使用margin属性来阻止它们显示在绝对定位的元素下面。我想知道最简单的方法是什么，希望有人能指出我最简单的方向！

HTML：

    <div id="header">
        <h1>Logo</h1>
            <div id="nav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Products</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>  
    </div>

            <div id="bannerdiv">
                <div id="largebanner">
                <img src="images/large-banner.jpg"; width: 2304px; height: 800px;>
                </div>
                <div id="mediumbanner">
                <img src="images/medium-banner.jpg"; width: 1152px; height: 400px;>
                </div>
                <div id="bannertext">
                    <p id>tester</p>
                </div>
            </div>  

            <div id="footer">
        <p>Footer</p>
    </div>

CSS：

img { height: auto; display: block; max-width: 100%;}
body {width: 90%; margin: 0 auto;}

#nav  {text-align: center;}
#header h1 {text-align: center;}
#bannerdiv { height: auto; position: relative; }
#largebanner { z-index: 1; position: absolute; }
#mediumbanner { z-index: 1; position: absolute; }
#bannertext { position:absolute ; z-index: 10; margin: 40px 0 0 40px;}
#footer {float: left; position: relative;}
li {
display: inline;
padding: 0.5em;
}

#nav, #footer {
background-color: #efefef;
padding: 0.5em 0;
position: relative;
}


@media all and (min-width: 1201px) {

#largebanner {display: block; z-index: 1;}
#mediumbanner {display: none;}
}
@media all and (max-width: 1200px) 
{
#largebanner {display: none;}
#mediumbanner {display: block;}
}

Answer 1

您使用的是像bootstrap这样的框架吗？

此外，对于在元素下方消失的页脚，标题，正文和页脚需要被包含在div中以防止发生这种情况。

如果我能看到问题在行动中会很好，所以我可以理解它。

绝对定位和响应div

1 个答案: