Question

我正试图在一个流畅的网格页面中获得一个div标签。

我想要实现的是像你在Facebook首页上看到的顶级蓝条。横跨屏幕宽度的蓝线和Facebook徽标位于左角附近。

我的情况是我试图通过两个div标签实现这一点。一个div跨越浏览器的宽度并在其下方添加另一个div，并将margin-top设置为与第一个div的height相等的负数。

但是这样，第二个div落后于第一个div，它覆盖了浏览器屏幕的整个宽度而不可见。是否有方法可以在第一个div 前面显示第二个div。

Answer 1

如果没有看到一些代码，很难理解其中的部分内容，但我可能有一个想法可以帮助你。

对于CSS，请尝试向div添加z-index。

#first-div {
    z-index: 100;
}
#second-div {
    z-index: 105;
}

这会将#second-div放在#first-div上。

Answer 2

这是一个FIDDLE，如果这是你想要达到的目的。

<强> HTML

<div id="topbar">

  <div class="topbar-wrapper">

    <span class="logo">Your Logo Here</span>

    <input type="text" class="search" name="search" placeholder="Search">

  </div>

</div>

<div class="message">

  <div class="message-wrapper">

    This is a simple message for visitor.

    <span class="close">Close</span>

  </div>

</div>

<div id="content">

  <span>CONTENT</span>

</div>

<强> CSS

#topbar {
  background: #44619d;
  position: fixed;
  width: 100%;
  z-index: 9999;
}
.topbar-wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 8px;
}
.logo {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: -1px -1px 0 #344d7f;
}
.search {
  width: 400px;
  margin-left: 15px;
  padding: 1px 0 2px 4px;
  border: 1px solid #344d7f;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.search:focus {
  outline: none;
}
.message {
  position: relative;
  background: #fff9d7;
  display: block;
  top: 40px;
  width: 100%;
  padding: 5px 10px 5px 10px;
  font-size: 12px;
  color: #444;
  z-index: 9998;
}
.close {
  float: right;
  margin: -1px 20px 0 0;
  padding: 1px 3px 1px 3px;
  border: 1px solid #c4cde0;
  cursor: pointer;
}
#content {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 40px 10px 10px 10px;
  min-height: 1000px;  /* For demo purpose */
  border: 1px solid #c4cde0; 
}
#content span {
  display: block;
  width: 170px;
  margin: 100px auto;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #44619d;
}

在流体网格中获取div标签

2 个答案: