Почему исчезает текст?

Question

[bazliiii]

У меня есть два блока и я хочу через минусовой margin один наложить на второй, но при попытке это сделать, у меня текст заезжает за фоновое изображение ( z-index не помогает ), вот скрины:



Песочница:

https://codepen.io/Bazli/pen/qBoPwWP

Comments

[Ankhena]

Есть какие-то аргументы почему мы должны угадывать ваш код по скрину?

Приложите к вопросу макет и код с проблемой на codepen.io

Я уже прошла мимо вашего вопроса молча, но вы меня сюда сами позвали.

[bazliiii]

Ankhena, добавил код

[Ankhena]

bazliiii, ну может, кому-то будет не лень делать за вас песочницу, причём так, чтобы проблема была видна.

[bazliiii]

Ankhena, https://codepen.io/Bazli/pen/qBoPwWP , вроде смог настроит кодпен. Я вместо изображения ( bcg-img ) сделал черный фон и если смотреть на разрешении например 360px , тогда видно что текст заходит за фон

Answer 1

[Ankhena]

Это происходит из-за того, что investing имеет position: relative (чтобы разобраться, гуглите "css контекст наложения").
Если бы у нег был position static, то блок exits просто наполз бы сверху, как и предполагалось.

Как починить?
1. (так себе вариант) Задать relative и для exits.
2. (получше) Перевесить relative на investing__inner
2. (ещё получше, люблю когда разметка почище). Убрать relative у investing. Удалить investing__line из разметки. Заменить на фон градиентом.

Это "Удалить investing__line из разметки" имеет смысл сделать в любом случае. Если не хочется градиентом, то по крайней мере заменить на псевдоэлемент.

Comments

[bazliiii]

Спасибо за ответ!
По поводу градиента ( как вы уже поняли я новичок и тренируюсь верстать по фигме шаблон ) , так вот в фигме bacground написан так:

background: linear-gradient(180deg, rgba(255, 255, 255, 0) 39.06%, #FFFFFF 100%), url(bck.png);
Но не выглядит так как в фигме (url(bck.png); я убрал )

Например:
Вот так выглядит градиент в фигме:

А вот так у меня:


Так же если использовать просто background , тогда у меня вообще градиента нет , поэтому использую background-color

[Ankhena]

bazliiii, это в codepen у вас была вертикальная полоска. Тут на скрине я её не вижу.

[bazliiii]

Ankhena, вертикальная полоса используется только для ПК версии , а на мобильной скрывается ( на скрине разрешение 360px в ширину ). Видимо я не все стили скопировал и поэтому она не скрылась

[Ankhena]

bazliiii, я про неё говорила заменить на градиент.

Собственно, если она не нужна на мобилках и вы хотите продолжать использовать для неё псевдо, то можно убирать relative на мобилках (менять на static)