Установка позиции текста - вверху:

Как установить положение текста динамически в зависимости от высоты экрана.

#txt{
       position: absolute;
       top: 685px;
    }

    html,body {
        margin:0;
        padding:0;
    }


    #pic
    {
       width: 100%;
    }

    <image src = "https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id = "pic"></image>

    <div id = "txt">
    Hello world
    </div>

Цель состоит в том, чтобы текст hello world располагался над горизонтальной линией во всех размерах браузеров. Моя попытка работает на кодовый ключ в полноэкранных окнах, но терпит неудачу, когда вы запускаете ее здесь.

зачем повторять один и тот же вопрос? отредактируйте предыдущий, чтобы добавить больше пояснений

— 23.04.2018 01:07

@ не решено

— 23.04.2018 01:07

мы не просто повторяем вопрос, потому что он не решен ... улучшите его, добавив больше деталей, подождите ... и если по-прежнему ничего не мешает добавить награду ... кстати, он не был решен, потому что вы не поняли достаточно с вашими потребностями

— 23.04.2018 01:08

@TemaniAfif получил, спасибо за объяснение

— 23.04.2018 01:10

javascript jquery html css

23.04.2018 00:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Почему бы не показать текст перед на изображении? И если вам нужно, чтобы он был ближе к линии, предполагая, что линия находится в центре изображения 600x600 пикселей, вы можете расположить его относительно сверху на половину изображения:

html,
body {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: relative;
}

#txt {
  position: absolute;
  top: 50%;                      /* position of text set to half */
  transform: translateY(-100%);  /* just moving the text div a bit back */
}

#pic {
  width: 100%;
}

<div id = "wrapper">
  <div id = "txt">Hello world</div>
  <img src = "https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id = "pic">
</div>

Обновлено: img упакован в div. Положение текста может быть установлено в процентах от высоты изображения.

это работает, если вы хотите разместить половину изображения. Но я ищу более общую позицию, например, что, если я хочу разместить ее на четверть изображения.

— 23.04.2018 00:58

а также это не поддерживает, если размер браузера отличается

— 23.04.2018 00:59

@halmos Теперь лучше?

— 23.04.2018 01:10

23.04.2018 00:56