时间戳

首页 > 解决方案 > 位置 div 之间的空间：相对

javascript - 位置 div 之间的空间：相对

问题描述

我正在构建一个位于标题上方的导航面板。我使用postion: relative并子跟踪了几个像素（#navigation）。

部分标题的高度是保留的，就好像导航面板没有移动一样。我希望该部分更接近标题而没有中断。

我该怎么做？

在此处输入图像描述

body {
  background-color: #e6e6e6;
}

#conteiner {
  border: 1px solid black;
}

#conteiner>* {
  min-height: 100px;
  display: flex;
}


/* HEADER */

header {
  flex-direction: column;
  align-items: center;
}

#spacer-up {
  background-color: #8dc63f;
  height: 15px;
  width: 100%;
}

#frame-header {
  max-height: 400px;
  flex-direction: column;
  align-items: center;
}

#spacer-down {
  background-color: #dddddd;
  height: 15px;
  width: 100%;
}

#navigation {
  width: 450px;
  height: 130px;
  display: flex;
  position: relative;
  top: -65px;
}

.button1 {
  flex: 1;
  background-color: #00984a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  transition: 0.1s;
}

.button1:hover {
  background-color: #007639;
  transition: 0.2s;
}


/* Content */

section {
  display: flex;
  justify-content: center;
  position: relative;
}

#content {
  border: 1px solid black;
  width: 1200px;
  background-color: #FFF;
}

footer {
  background-color: #007639;
  justify-content: center;
  align-items: center;
}
<body>
  <!-- Add your site or application content here -->
  <div id="conteiner">
    <header>
      <div id="spacer-up"></div>
      <div id="frame-header">
        <img src="/img/header-background.png" alt="" width="1138" height="369">
      </div>
      <div id="spacer-down"></div>
      <div id="navigation">
        <div class="button1">TEXT1</div>
        <div class="button1">TEXT2</div>
        <div class="button1">TEXT3</div>
      </div>
    </header>
    <section>
      <div id="content">
        SECTION 1
      </div>
    </section>
    <footer>
      FOOTER
    </footer>
  </div>
 <body>

标签： javascripthtmlcss

解决方案

推荐阅读