Все движется ко дну - PullRequest
Новая
       1

Все движется ко дну

0 голосов
/ 18 января 2020

Можно ли как-нибудь расположить все, чтобы элементы (например, текст / картинки) могли накладываться?

Например: 

<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image</div>
    <div class="class2">text</div>
    <div class="class3">text</div>

</body>

Я хочу текст класса 2 и класс 3 для отображения поверх изображения. Однако в этом формате они просто появляются под изображением.

Я попытался поместить класс 2 и класс 3 в класс 1 

<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image
        <div class="class2">text</div>
        <div class="class3">text</div>
    </div>

</body>

Однако я нашел это очень проблематичным. Каждый раз, когда я добавляю новую вещь в класс 1, вся страница будет двигаться.

Несмотря на то, что position: relative; and position: absolute; решает эту проблему, это не сработает, если я попытаюсь отобразить элемент на самой странице (за пределами класса 1 - идет вниз страницы). Я пытаюсь, чтобы что-то вроде этого https://www.w3schools.com/howto/howto_js_alert.asp появилось по всей моей странице.

Попытался установить с помощью position: relative; и окно сообщения с предупреждением как 'position: absolute; `но это ничего не сделало. Может ли кто-нибудь дать несколько советов? Большое спасибо!

Ответы [ 3 ]

2 голосов
/ 18 января 2020

Я не уверен, что понимаю, что вам нужно, но, возможно, ваша потребность что-то вроде этого: 

.class1 {
  position: relative;
  background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
  background-size: contain;
  background-repeat: no-repeat;  height: 100px;
  width: 100px;
}
<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">
        <div class="class2">text2</div>
        <div class="class3">text3</div>
    </div>

</body>
0 голосов
/ 18 января 2020

Вам нужно установить контент внизу страницы, попробуйте решение, это для правого нижнего угла 

.class1{
      position: absolute;
    right: 0;
    bottom: 0;
}
 <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image
        <div class="class2">text</div>
        <div class="class3">text</div>
    </div>
0 голосов
/ 18 января 2020

Да, вот так.

HTML

<div class="container">
    <div class="class1">image</div> //use an img tag here
    <div class="text-container"> 
     <div class="class2">text</div>
     <div class="class3">text</div>
    </div>

</div>

CSS

.container {
  position: relative;
  text-align: center;
  color: white;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...