非常基本的html / bootstrap / css

时间:2015-11-09 19:01:09

标签: jquery html css twitter-bootstrap

目前学习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

具体来说,徽标如何与滑块重叠。

现在我已经借了"菜单栏的代码并将其应用于引导程序模板,并提供如下内容:

http://tumolo.co.uk/fcslfn/

徽标不是与滑块重叠,而是将其向下推。如何让徽标与滑块重叠?

提前感谢您的所有帮助。

2 个答案:

答案 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%。