CSS：不位于标题下方的 Divs/文章 - 定位问题答案

【问题标题】：CSS: Divs/articles not sitting underneath header - positioning issueCSS：不位于标题下方的 Divs/文章 - 定位问题
【发布时间】：2018-04-25 20:40:46
【问题描述】：

想知道您是否可以提供帮助。在谷歌上用这个在房子周围转转。

基本上，我正在尝试在 SASS 中构建网站，而不是有意使用任何 css 框架。但是我在制作我的两篇文章时遇到了问题，出现在我的标题/标题图像下......这是该网站目前的外观：

https://reenaverma.github.io/

问题是，我在标题上有一些 javascript，如果您在图像上移动鼠标，图像会在鼠标移动的任何方向上平移。这似乎只有在标题设置为：position: absolute;

时才有效

因此，我的文章位于标题的顶部/内部。

如果我删除 position: absolute，那么只有这样，我的文章才会位于标题下方。但是随后 javascript 不起作用...

以下是我目前使用的 CSS/SASS：

header {
 // background-image: url(https://kordastudio.hu/wp- 
 content/uploads/2017/01/blade-runner-2049_.jpg);
 background-image: url(/assets/images/futuristic_background.jpg);
 background-position: center;
 background-size: 100%;
 position: absolute;
 background-repeat: no-repeat;
 top: 0;
 left: 0;
 z-index: -1;
 /* Preserve aspet ratio */
 min-width: 110%;
 min-height: 500px;
}

.container {
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 align-content: center;
 justify-content: flex-start;
 // position:relative;
 // padding:10px;
 margin: 0 auto;
 width: 100%;
 min-height: 100vh; /* make sure wrapper is taller enough */
 border: solid thin #060;
 // overflow: hidden; /* Add this */
}


.flex-item:nth-child(1) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
 }

.flex-item:nth-child(2) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
 }

.flex-item:nth-child(3) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

HTML：

 <body>
<main>
  <nav>
    <ul>
      <li>about me</li>
      <li>projects</li>
      <li>timeline</li>
      <li>linkedin</li>
      <li>github</li>
    </ul>
  </nav>

  <!-- Background image and title -->

    <div class="container">

      <header id="header" class="gradient flex-item">
        <h1>hello</h1>
      </header>

    <!-- grey container -->
      <article class="flex-item">
        text
      </article>

      <article class="flex-item">
        text
      </article>

</div>
<main>

真的很烦！与这个斗争！提前致谢！

【问题讨论】：

标签： css sass css-position positioning

【解决方案1】：

我确实让它工作了。基本上，我的容器和弹性项目的代码有问题。我找到了另一种 flex 解决方案，它避免了绝对位置的需要，并将我的盒子放在下面。

不确定它到底是什么，但下面是新代码。我把它包裹在我想出现在标题下方的文章周围......

.flex-grid {
  display: flex;
  margin-top: -50;
}
.flex-grid .col {
  flex: 1;
  background-color: #1d1d1d;
  margin-top: 0px;
  width: 100%;
  height: 300px;
  border: 1px solid orange;
  padding: 20px;
}

【讨论】：

【解决方案2】：

我正在尝试这个，但我认为你可以尝试

对于横幅

position: relative;

如果您想要横幅的固定高度，或者为标题设置一个 div 并为横幅设置一个高度。

对于 2 flex 项目，换一个新的

<div>
    <article class="flex-item"></article>
    <article class="flex-item"></article> 
</div>

尚未测试代码，但如果它不起作用，请告诉我，然后我会尝试运行代码:)

【讨论】：