在流體網格中的另一個標簽上獲取div標簽

Question

我正在嘗試在流體網格頁面中將一個div標簽替換為另一個。

我要實現的目標是在首頁上看到的最上面的藍條。 它的藍線橫跨屏幕寬度，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;
}