Как разместить изображение поверх текста?

верхний атрибут, похоже, не работает с html. Я пытаюсь использовать верхний атрибут изображения, чтобы переместить изображение вверх и разместить над текстом, но верхний атрибут CSS никогда не перемещает изображение Вот фрагмент

<div class = "stl_02">
            <div class = "stl_03">
                <img src = "" 
                alt = ""style = "top: 4.4538em;" class = "stl_04">
            </div>
            <div class = "stl_view">
                <div class = "stl_05 stl_06">
//other texts here

вот правила css

.stl_02 {
    height: 46em;
    font-size: 1em;
    margin: 0em;
    line-height: 0.0em;
    display: block;
    border-style: none;
    width: 51em;
}
.stl_03 {
    position: relative;
}
.stl_04 {
    width: 100%;
    clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
    position: absolute;
    pointer-events: none;
}

Пожалуйста, как можно подтолкнуть изображение вверх с помощью этого атрибута style = "top: 4.4538em;" это вызов

html css

17.12.2018 20:51

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

105

Ответы 1

К вашему элементу делает применен атрибут top. Это можно увидеть в следующем:

.stl_02 {
  height: 46em;
  font-size: 1em;
  margin: 0em;
  line-height: 0.0em;
  display: block;
  border-style: none;
  width: 51em;
}

.stl_03 {
  position: relative;
}

.stl_04 {
  width: 100%;
  clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
  position: absolute;
  pointer-events: none;
}

<div class = "stl_02">
  <div class = "stl_03">
    <img src = "http://placehold.it/100" alt = "" style = "top: 4.4538em;" class = "stl_04">
  </div>
  <div class = "stl_view">
    <div class = "stl_05 stl_06">
    </div>
  </div>
</div>

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

Также стоит отметить, что top работает только с элементом позиционируется. Вам необходимо иметь position: relative, position: absolute или аналогичный на .stl-04, чтобы разместить его вместе с top.

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

Кроме того, основание полей на размерах шрифта (с единицами em), как правило, является плохой практикой; вместо этого вам действительно следует использовать фиксированные единицы (желательно не использовать столько десятичных знаков).

Вы можете разделить пиксель. См. этот вопрос о различном субпиксельном рендеринге в разных браузерах.

— 17.12.2018 21:21

17.12.2018 20:54