CSS: Div / статьи не находятся под заголовком - проблема позиционирования - PullRequest
Новая
       31

CSS: Div / статьи не находятся под заголовком - проблема позиционирования

0 голосов
/ 25 апреля 2018

Интересно, если бы вы могли помочь. Ходить по домам с этим на 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>

Действительно раздражает! Борьба с этим! Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Я на самом деле получил это работает.По сути, что-то не так с кодом моего контейнера и 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;
}
0 голосов
/ 25 апреля 2018

Я рискну с этим, но я думаю, что вы можете попробовать с

для баннера 

position: relative;

Или установить div для заголовка и установить высоту для баннераесли вы хотите фиксировать высоту для баннера.

Для 2 flex-элементов оберните новый 

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

Пока не тестировали код, но дайте мне знать, если он не работает, тогда я постараюсьзапустить код :)

...