Реагируйте, используя CSS позиционирование с различными компонентами - PullRequest
Новая
       3

Реагируйте, используя CSS позиционирование с различными компонентами

0 голосов
/ 10 марта 2020

Я пытаюсь настроить целевую страницу с изображением героя в качестве фона. Я пытаюсь расположить две колонки рядом друг с другом по центру экрана. Я планировал использовать тег body в CSS, чтобы установить background-image и установить position: relative, чтобы впоследствии я мог использовать position: absolute для столбцов с текстом в они должны быть в центре изображения / экрана. Однако я использую React, и я использовал компонент index. js, чтобы установить его относительно и установить фон, а затем я добавил Домашний компонент , который будет содержать остальная часть целевой страницы, начиная с двух столбцов, которые должны быть установлены с position absolute.

в индексе. js компонент стилей 

body{
    background-image: url(../src/assets/HeroImage.jpg);
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

в компоненте домашних стилей 

.heroimage-text-container{
    background-color: red;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

То, что происходит при такой попытке, так это в том, что heroimage-text-container исчезает, когда позиция установлена ​​в абсолют. Я знаю, что этого не произошло бы, если бы все это было в одном компоненте, поэтому я надеюсь, что кто-то здесь может помочь мне исправить это. Спасибо.

1 Ответ

0 голосов
/ 10 марта 2020

В этом случае вы должны использовать flex box. Абсолютно используя тот же класс, он будет перекрываться, потому что они будут иметь одинаковые свойства. 

body {
  background-image: url("https://images.unsplash.com/photo-1506716442075-1e2e0e5b1256?ixlib=rb-1.2.1&auto=format&fit=crop&w=1343&q=80");
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.App {
  font-family: sans-serif;
  text-align: left;
  display: flex;
  flex-direction: row;
}

.heroimage-text-container {
  background-color: red;
  height: auto;
  margin: 10px;
  padding: 10px;
}

Взгляните на песочницу https://codesandbox.io/s/bold-tdd-d39oc

...