Как сместить элемент, если смещается элемент перед ним?

Question

[IvanKolyadich]

У меня возникла необходимость сместить объект на сайте немного вниз. Смещаю через margin-top: 20px;, не получается(смещается вместе с текстом сверху, заголовком), смещаю через

position: relative;
top: 20px;

, смещается, но страница не скролится, из-за чего элемент обрезан и страница больше не скролится, не видно ещё половины объекта (если что, это объект тега <img>.

Comments

[BEKa T]

Можно увидеть полный код и скрин?

[Алексей Уколов]

Сделайте интерактивный пример на codepen.io

[BEKa T]

А что вам нужно? 2 блока и внутри картинки?

[IvanKolyadich]

BEKa T,

<div class="how-container">
<div class="how-main-text">
<h2 class="how-name">Как мы работаем</h2>
</div>
<div class="how-block">
<div class="stage1">
 <img class="stage1-img" src="/img/stage1.png" alt="Stage 1">
</div>
</div>
</div>

Вот я перемещаю тег img, но вместе с ним двигается и h2

[WebforSelf]

IvanKolyadich, не поленитесь и сделайте на
https://codepen.io/trending
Ванговать по коду сложно

[IvanKolyadich]

WebforSelf, ок я сейчас не дома, скоро сделаю. Просто на телефоне сложно код писать

[BEKa T]

IvanKolyadich,

.how-block {
  margin-top: 400px;
}

Работает же

[IvanKolyadich]

BEKa T, странно, если я накладываю margin-top на div с классом stage1, то у меня и текст h2, и div контейнер смещаются вниз

[BEKa T]

Отправьте полностью код html и css. Я так ничего понять не могу

[IvanKolyadich]

BEKa T, ок, дома буду, отправлю, слишком много кода будет

Answer 1

[Talim40k]

Возможные варианты решения:
1. Задать overflow: hidden для элемента сквозь который проходит margin (чтобы убрать это прохождение).
2. Указать margin-bottom впередиидущему элементу (вместо margin-top текущему). Не забываем про схлопывание вертикальных margin.
3. Использовать padding-top для контейнера внутри которого находится элемент.
4. При использовании "position: relative" дать нижний margin на размер сдвига, у родителя при этом должен быть "overflow: hidden". Или вместо этого использовать padding-bottom родителя на размер сдвига (т.е. 20px в вашем случае).

Comments

[IvanKolyadich]

Спасибо, помогло padding-top

Answer 2

[Марк Ешкилев]

попробуй этот самый img обернуть в div и уже у div в style напиши margin-top.