Как расположить элементы поверх картинки?

@Ravenger2709 · Регистрация: 23.10.2019

Author24 — интернет-сервис помощи студентам

Доброе утро, форумчане! Который день пытаюсь прилепить текст комментариев и заголовок к картинке через position, но они никак не желают становится на место, а вместо этого к заданному месту прилепляются элементы из соседних блоков..

Скажите пожалуйста, как лучше реализовать это?

CSS

.news-item-props-main-news-banner {
        font-size: 12px;
        margin-top:10px;
    }
 
    .news-time-main-banner-time {
            padding-left: 15px;
            background-image: url('../img/icon-time.png');
            background-repeat: no-repeat;
        }
 
    .news-item-props-main-news {
        font-size: 12px;
        position: relative;
        margin-top:10px;
    }
 
    .main-news-banner {
        width: 462px;
        min-height: 322px;
        position: relative;
}
 
    .news-item-text-main-banner {
        position: relative;
        
    }
 
     .news-item-text-main-article {
        margin-bottom: 20px
     }

HTML5

<section class="main-news-block">
                <h2 class="visually-hidden">Главный блок новостей</h2>
                <ul class="main-news-list">
                    <li>
                        <article class="news-item-text-main-banner">
                            <h3 class="hot-news-header-big">
                                <a href="#">В Крыму отреагировали на слова Кравчука о возврате полуострова</a>
                            </h3>
                            <img alt="Крымский полуостров" src="img/Crimea.jpg" class="main-news-banner">
                            <div class="news-item-props-main-news-banner">
                                <a href="#">/Политика</a>
                                <time datetime="2019-10-15T12:00:05" class="news-time-main-banner-time">10.48
                                    <span>19 Июня 2018</span>
                                </time>
                            </div>
                    </article>
                    </li>
</ul>
</section>

@FreeYourMind · 28.10.2019, 18:31

попробуйте использовать z-index

@Ravenger2709 · 31.10.2019, 13:50 **[ТС]**

Спасибо!

@FreeYourMind 147 / 147 / 104 Регистрация: 13.11.2016 Сообщений: 557
	28.10.2019, 18:31	2
	попробуйте использовать z-index 0

@Ravenger2709 0 / 0 / 0 Регистрация: 23.10.2019 Сообщений: 5
	31.10.2019, 13:50 [ТС]	3
	Спасибо! 0

Опции темы