目前学习bootstrap,我的html和css技能是基本的,但是使用lynda.com和tutsplus.com学习很多
基本上,我从这里获得了一个bootstrap模板:
http://ironsummitmedia.github.io/startbootstrap-modern-business/
我想要的结构非常适合我学习 - 顶部的菜单栏,下面的滑块,然后是内容。
我想要实现的是,这里是菜单栏式:
http://themeforest.net/item/equipo-responsive-wordpress-theme/full_screen_preview/8015431
具体来说,徽标如何与滑块重叠。
现在我已经借了"菜单栏的代码并将其应用于引导程序模板,并提供如下内容:
徽标不是与滑块重叠,而是将其向下推。如何让徽标与滑块重叠?
提前感谢您的所有帮助。
答案 0 :(得分:0)
.top {
width: 1200px;
margin: 0 auto;
height: 100px;
position: relative;
z-index: 2;
background-color: red;
}
.logo {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: black;
}
.slider {
position: relative;
z-index: 1;
width: 1200px;
background-color: gray;
height: 400px;
}
<div class="top">
<div class="logo"></div>
</div>
<div class="slider"></div>
绝对位置标志。首先,您需要在“div.top”的“col-12”中添加一个类,并添加相对于它的位置。我添加了一个示例代码,如何做到这一点。
答案 1 :(得分:0)
在HTML中,您可以将借用的标题包装在div中,并以内联方式将其包装起来。
<div id="headerContainer" style="position:fixed; margin:0 auto; top:0; left:0; z-index:2000; width:100%;"></div>
将其设置为固定位置将告诉它留在那里而不是移动。设置边距,然后设置您的位置。 Z-index使其在整数下重叠任何内容,并确保将宽度设置为100%。