如何在推特引导程序的顶部导航栏前面重叠图像?



我想在我的Twitter引导页面上放置一个横幅图片,图片顶部重叠在顶部导航栏的前面。

我的html代码如下所示。它适用于较小的屏幕宽度,但对于较宽的屏幕,图像的顶部显示在导航栏后面。我使用的是Bootstrap v2.2.2。

有什么想法可以让它适用于所有屏幕尺寸吗?非常感谢!

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
       ...
    </div>
    <style type="text/css">
        .mypic {margin: -120px 0 -20px 10px;}
    </style>
    <div class="container">
        <div class="mypic">
            <img src="..." width="300"/>
        </div>
    </div>
    ...
</body>

我不太清楚你要去哪里,但这是一个开始吗
http://jsfiddle.net/panchroma/xdv9m/

您可能需要使用媒体查询来细化小窗口大小的结果。

CSS

.mypic {
margin: -120px 0 -20px 10px; /* play with these to position the image */
position:absolute;
z-index:100;
width:300px;
}  

祝你好运!

最新更新