Question

想知道你是否可以提供帮助。在google上用这个房子四处走动。

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

https://reenaverma.github.io/

问题是，我在标题上有一些javascript，如果你在图像上移动鼠标，图像会朝着鼠标移动的方向平移。如果标题设置为： 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>

真烦人！苦苦挣扎着这一个！提前谢谢！

Answer 1

我实际上已经开始工作了。基本上，我的容器和flex-item的代码有问题。我找到了另一个灵活的解决方案，它可以防止绝对位置的需要并保持我的盒子在下面。

不确定它到底是什么，但这里是下面的新代码。我把它包裹在我希望出现在标题下面的文章中......

.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;
}

Answer 2

我抓住机会，但我认为你可以试试

横幅

position: relative;

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

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

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

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

CSS：没有位于标题下方的Div /文章 - 定位问题

2 个答案: