Расположить текстовый блок поверх картинки без смещения контента

@Giggle7 · Регистрация: 03.06.2016

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

Нужно разметить блоки как на картинке:

Расположить текстовый блок поверх картинки без смещения контента

Но проблема в том, что не получится всё это сделать позиционированием блоков, когда одному из блоков добавляешь position: absolute, блоки сползают относительно всего, портя всю разметку. Как можно это реализовать?
(Некий текст, тоже находится поверх картинки)

@korep · 07.06.2016, 20:59

Giggle7, используйте

CSS

1	position:inherit;

Смещает блоки относительно исходного положения элемента не трогая остальные. Или примените absolute ко всем блокам. Ну и крайнее: наложение элементов производится относительно Z-index. Когда вы последовательно добавляете элементы на страницу, то Z-index назначается автоматом (последний блок самый верхний) для изменения этого исопльзуйте z-index.

@Giggle7 · 07.06.2016, 21:17 **[ТС]**

Может вы имели ввиду relative? Тогда блоки находятся за картинкой. Проблема ещё в том, что "некий текст" должен находиться строго по низу картинки (должен менять положение от изменение количества строк, прибиваться к низу).
Ко всем блокам не применишь absolute, пробовал, рушится просто вся разметка.

@korep · 07.06.2016, 21:23

Дайте ваш код я поправлю.

@Giggle7 · 07.06.2016, 21:37 **[ТС]**

Эм, что именно? 4 блока, а в css пока только стилизация, не более.

@korep · 07.06.2016, 21:38

Вот дайте мне их. Хочу глянуть как вы текст размещаете и подправить.

@Giggle7 · 07.06.2016, 21:49 **[ТС]**

HTML5

<div class="content">
<div class="content_prev">
<img src="images/prev.jpg" alt="">      
</div>
<div class="category">
<a href="#">Lorem</a>
</div>
<div class="post">
<h2><a href="#">"Lorem ipsum dolor sit amet"</a></h2>
</div>
/div>

CSS

.content {
    width: 175px;
    height: 250px;
    float: left;
    margin: 5px 5px 0 0;
    overflow: hidden;
}
.content_prev {
    width: 100%;
}
.category {
    line-height: 25px;
    background: #1f527c;
    margin-top: 10px;
    float: left;
}
.category a {
    width: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    padding: 0 7px;
}
.post h2 {
    float: left;
    line-height: 0.5;
    padding: 10px;
}

@korep · 07.06.2016, 21:55

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

@Giggle7 · 07.06.2016, 22:09 **[ТС]**

Если честно, не понял...

@Fedor92 · 07.06.2016, 22:15

Giggle7, а почему картинку фоном не поставите?

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
    html, body{width:100%; height:100%; margin:0}
    .content {
        width: 175px;
        margin: 5px 5px 0 0;
    }
    .content_prev {
        width: 100%;
    }
 
    .content_prev>a{
        position:absolute;
        font-size: 12px;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        padding: 0 7px;
        z-index:9999;
        top:40px;
        line-height: 25px;
        background: #1f527c;
        
    }
 
    .post h2 {padding: 10px}
 
    .content_prev>img{width:100%; position:relative; z-index:0}
    </style>
</head>
<body>
<div class="content">
    <div class="content_prev">
        <a href="#">Admin</a>
        <img alt="Коты смайлик" src=http://liubavyshka.ru/_ph/19/2/185996373.gif> 
    </div>
    <div class="post">
        <h2><a href="#">"Lorem ipsum dolor sit amet"</a></h2>
    </div>
</div>
</body>
</html>

@Giggle7 · 07.06.2016, 22:37 **[ТС]**

Потом картинка будет ссылкой.

Добавлено через 12 минут
Спасибо, конечно, но это не то что я хотел, у меня так и было примерно, position: absolute "убивает" всю разметку и уползает вверх.

@Fedor92 · 07.06.2016, 23:16

Сообщение от Giggle7

Спасибо, конечно, но это не то что я хотел, у меня так и было примерно, position: absolute "убивает" всю разметку и уползает вверх.

А вот с этого момента по подробней, если можно со скринами...

@Giggle7 · 08.06.2016, 13:25 **[ТС]**

Сообщение от Fedor92

А вот с этого момента по подробней, если можно со скринами...

Блок начинает быть абсолютным, по сравнению с кучей блоков перед ним и сваливает к ближайшему абсолютному блоку, а он аж в шапке. Добавление absolute ко всем блокам перед ним, убивает всё "флоутирование".

@Fedor92 · 08.06.2016, 13:30

Сообщение от Giggle7

Блок начинает быть абсолютным, по сравнению с кучей блоков перед ним и сваливает к ближайшему абсолютному блоку, а он аж в шапке. Добавление absolute ко всем блокам перед ним, убивает всё "флоутирование".

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

Вы нам дали только код блока с картинкой, поэтому всей картины мы не видим... Особенно того, что происходит в шапке... А на вопрос отвечу так, чтобы не разбегались блоки с абсолютным позиционированием, их родительским блокам надо задавать position:relative и тогда блоки будут позиционироваться внутри родителя а не относительно всей страницы...

@Giggle7 · 08.06.2016, 20:51 **[ТС]**

Всем спасибо, кто откликнулся! Проблему решил.

@Fedor92 · 08.06.2016, 21:29

Сообщение от Giggle7

Всем спасибо, кто откликнулся! Проблему решил.

Неплохо было бы выложить решение - может кому-то пригодиться...

@Giggle7 · 08.06.2016, 21:52 **[ТС]**

Сообщение от Fedor92

Неплохо было бы выложить решение - может кому-то пригодиться...

Это вряд ли, там частный случай, моя невнимательность.)))

@boilzzz · 09.06.2016, 02:13

Fedor92, по моему это решается z-index'ом если прочесть вот это предложение

Сообщение от Giggle7

Может вы имели ввиду relative? Тогда блоки находятся за картинкой.

@Fedor92 · 09.06.2016, 10:34

Сообщение от boilzzz

Fedor92, по моему это решается z-index'ом если прочесть вот это предложение

Ну если Вам так показалось, напишите код, используя position:relative - этого никто не запрещает...

@boilzzz · 09.06.2016, 11:27

Fedor92, Giggle7,
https://jsfiddle.net/a6xwyy02/

HTML5

<div class="content">
<div class="content_prev">
<img src="http://www.eveboo.com/wp-content/uploads/2013/03/lion_hd_wallpaper.jpg" alt="">      
</div>
<div class="category">
<a href="#">Lorem</a>
</div>
<div class="post">
<h2><a href="#">"Lorem ipsum dolor sit amet"</a></h2>
</div>
</div>

CSS

.content {
    width: 175px;
    height: 250px;
    margin: 5px 5px 0 0;
}
.content_prev img{
    width: 175px;
    height: 250px;
    position:absolute;
    top:0
}
.category {
    background: #1f527c;
    margin-top: 40px;
    position:relative;
    z-index:2;
     width: 40%;
}
.category a {
    width: 80%;
    font-size: 12px;
    color: black;
    text-align: center;
    padding: 0 7px;
    position:relative;
    z-index:2;
}
.post h2 {
    padding: 10px;
    position:relative;
    z-index:2;
     margin-top:120px
}

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 10,064 Записей в блоге: 11
	08.06.2016, 13:30	14
	Сообщение от Giggle7 Блок начинает быть абсолютным, по сравнению с кучей блоков перед ним и сваливает к ближайшему абсолютному блоку, а он аж в шапке. Добавление absolute ко всем блокам перед ним, убивает всё "флоутирование". Сделаю небольшое замечание: Вы крайне неинформативно расходуете сообщения... Я же попросил скрины... Вы нам дали только код блока с картинкой, поэтому всей картины мы не видим... Особенно того, что происходит в шапке... А на вопрос отвечу так, чтобы не разбегались блоки с абсолютным позиционированием, их родительским блокам надо задавать position:relative и тогда блоки будут позиционироваться внутри родителя а не относительно всей страницы... 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
		1
	Расположить текстовый блок поверх картинки без смещения контента 07.06.2016, 20:53. Показов 12964. Ответов 19 Метки нет (Все метки) Нужно разметить блоки как на картинке: Но проблема в том, что не получится всё это сделать позиционированием блоков, когда одному из блоков добавляешь position: absolute, блоки сползают относительно всего, портя всю разметку. Как можно это реализовать? (Некий текст, тоже находится поверх картинки) 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	07.06.2016, 21:17 [ТС]	3
	Может вы имели ввиду relative? Тогда блоки находятся за картинкой. Проблема ещё в том, что "некий текст" должен находиться строго по низу картинки (должен менять положение от изменение количества строк, прибиваться к низу). Ко всем блокам не применишь absolute, пробовал, рушится просто вся разметка. 0

@korep 52 / 45 / 18 Регистрация: 06.01.2013 Сообщений: 626
	07.06.2016, 21:23	4
	Дайте ваш код я поправлю. 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	07.06.2016, 21:37 [ТС]	5
	Эм, что именно? 4 блока, а в css пока только стилизация, не более. 0

@korep 52 / 45 / 18 Регистрация: 06.01.2013 Сообщений: 626
	07.06.2016, 21:38	6
	Вот дайте мне их. Хочу глянуть как вы текст размещаете и подправить. 0

@korep 52 / 45 / 18 Регистрация: 06.01.2013 Сообщений: 626
	07.06.2016, 21:55	8
	Первый момент. Если вы хотите, чтобы ваш текст жил вместе с картинкой, то объедините их под общим блоком и управляйте положением картинки и текста через негою Позиционируя текст и картинку относительно этого блока. И текст не убежит уже. 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	07.06.2016, 22:09 [ТС]	9
	Если честно, не понял... 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	07.06.2016, 22:37 [ТС]	11
	Потом картинка будет ссылкой. Добавлено через 12 минут Спасибо, конечно, но это не то что я хотел, у меня так и было примерно, position: absolute "убивает" всю разметку и уползает вверх. 0

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 10,064 Записей в блоге: 11
	07.06.2016, 23:16	12
	Сообщение от Giggle7 Спасибо, конечно, но это не то что я хотел, у меня так и было примерно, position: absolute "убивает" всю разметку и уползает вверх. А вот с этого момента по подробней, если можно со скринами... 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	08.06.2016, 13:25 [ТС]	13
	Сообщение от Fedor92 А вот с этого момента по подробней, если можно со скринами... Блок начинает быть абсолютным, по сравнению с кучей блоков перед ним и сваливает к ближайшему абсолютному блоку, а он аж в шапке. Добавление absolute ко всем блокам перед ним, убивает всё "флоутирование". 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	08.06.2016, 20:51 [ТС]	15
	Всем спасибо, кто откликнулся! Проблему решил. 0

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 10,064 Записей в блоге: 11
	08.06.2016, 21:29	16
	Сообщение от Giggle7 Всем спасибо, кто откликнулся! Проблему решил. Неплохо было бы выложить решение - может кому-то пригодиться... 0

@Giggle7 6 / 6 / 3 Регистрация: 03.06.2016 Сообщений: 41
	08.06.2016, 21:52 [ТС]	17
	Сообщение от Fedor92 Неплохо было бы выложить решение - может кому-то пригодиться... Это вряд ли, там частный случай, моя невнимательность.))) 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	09.06.2016, 02:13	18
	Fedor92, по моему это решается z-index'ом если прочесть вот это предложение Сообщение от Giggle7 Может вы имели ввиду relative? Тогда блоки находятся за картинкой. 0

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 10,064 Записей в блоге: 11
	09.06.2016, 10:34	19
	Сообщение от boilzzz Fedor92, по моему это решается z-index'ом если прочесть вот это предложение Ну если Вам так показалось, напишите код, используя position:relative - этого никто не запрещает... 0