Показать div поверх контейнера img

Я пытаюсь сделать белый div поверх img.

Я пробовал использовать абсолютное и относительное положение, но не смог. Я застрял.

Поле отображается под контейнером img.

Что я делаю неправильно? :)

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  text-align: center;
		
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
	
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
    
}

	<div class = "img_container">	
				<div class = "the_img">	
					<?php echo get_the_post_thumbnail( get_the_ID(), 'large'); ?>
			    <div class = "container_white">¨
				</div>
				</div>
				</div>
				 <div class = "fixfloat"></div>

Закройте блок the_img, до, блок container_white.

— 05.10.2018 16:49

stackoverflow.com/questions/403478/…

— 05.10.2018 16:50

html css wordpress

05.10.2018 16:44

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Единственное, что делает get_the_post_thumbnail, - это вставляет элемент изображения в ваш код. Например, он сгенерирует что-то вроде этого:

<img width = "" height = "" src = "" class = "" alt = "" large = "" srcset = "" sizes = "">

Конечно, заполнены вашими индивидуальными значениями. Для лучшей демонстрации я заменил вызов функции php возвращенным тегом img.

If you want to place your div relative to its parent:
Your parent should be position: relative
Your children should be postion: absolute

В вашем случае элемент the_img является родительским. Оба дочерних элемента, img и container_white, должны быть абсолютными, чтобы удалить их из обычного потока документов. См. Вырезанный код.

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  /**text-align: center;**/
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
   position: absolute;
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
}

.the_img{
  position: relative;
}

<div class = "img_container">	
  <div class = "the_img">	
     <img src = "https://images.pexels.com/photos/386148/pexels-photo-386148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt = "beach">
     <div class = "container_white"></div>
  </div>
</div>
<div class = "fixfloat"></div>

Итак, единственное, что вам нужно сделать, это