Вывод картинки за пределы родительского блока

@FloppyDisc · Регистрация: 18.11.2015

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

Здравствуйте! Нужно вывести изображение за пределы некоторой области, как на прикрепленном изображении.
Как это можно реализовать? Прост в CSS не очень силен.
Фон контейнера заполняется при помощи маленьких изображений размером 10 на 3 пикселя(синий фон), на нем присутствует кнопка, тоже сделана на css и справа надпись. Так вот, нужно как-то либо наложить рисунок с калькулятором или же сделать это вместе объединенно с CSS-кнопкой.
Пожалуйста, помогите это реализовать?) Или как по вашему лучше сделать, любые варианты приму) Главное чтобы рабочие были)
На данный момент контейнер выглядит как на втором изображении.

@boilzzz · 18.06.2016, 14:55

FloppyDisc,

HTML5

<div class="wrapper">
<span>Узнай свои балы и шансы на поступление</span>
<a>Прямо сейчас  <img src="https://2.downloader.disk.yandex.ru/disk/ffc3fb7f2e48954520daf2d287e994dd277485ec4ef863c81885c002649beccc/57656de6/1ceLxRmnxoT16cb4o9ozR93fc6DjYermv3m--DMxMRqo6Jdflp6HMJSKI74siifjf8U46laXPir_FCE_g--Cpw%3D%3D?uid=249209567&filename=kakl.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=51013&hid=3b050b111dcb62686afbb2cd51b871c3&media_type=image&tknv=v2&etag=424cb48abdbd601755bfc3b97e34f815"></a>
<span>Тестируй бесплатно</span>
 
</div>

CSS

.wrapper{
  width:100%;
  height:50px;
  background:blue;
  position:relative;
  padding-top:20px;
}
span{
  font-size:20px; 
   color:White
}
span:last-child{
  float:right;
  
}
a{
   font-size:30px;  
  margin-left:140px;
  color:White;
  background:orange;
  padding:10px;
  padding-right:30px;
  padding-left:30px;
  border-radius:10px
 
}
img{
  width:60px;
  height:60px;
  position:absolute;
  top:0;
 
}

надеюсь принцип понятен
https://jsfiddle.net/boilzzz/uortbab2/1/

@Mikhail Shell · 18.06.2016, 14:56

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

Нужно вывести изображение за пределы некоторой области

За пределы какой области? Выделите эту область.

@FloppyDisc · 18.06.2016, 22:00 **[ТС]**

Mikhail Shell, ну просто за область контейнера, посмотрите на второе изображение и первое прикрепленные, должно быть как на первом, прост не понял как еще объяснить, не серчайте

@boilzzz · 18.06.2016, 22:03

FloppyDisc, он не серчает, а т.к я правильное решение дал. зачем после него писать еще что то. лучше всего подождать ТС'а и он уже более подробней распишет если первое решение не верное.

Комментарий модератора

Во-первых не факт, что правильное... Во-вторых, Mikhail Shell, писал сообщение тогда когда Вы выкладывали код и мог не видеть ответа! Не надо мне указывать, что я должен удалять не нарывайтесь на предупреждение!

@FloppyDisc · 18.06.2016, 23:43 **[ТС]**

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

надеюсь принцип понятен

boilzzz, извините, немножечко не то) нужно вот так, как на прикрепленном изображении, видимо плохо объяснил)
все это должно выходить за рамки синего блока, но при этом оставаться таким же кликабельным как css-кнопка

@dimon888951 · 19.06.2016, 13:18

синему блоку relative, картинку внутрь синего блока с position:absolute. Вывести вверх за синий блок отрицательным top, ну и позиционировать относительно кнопки right, left, крутануть под углом rotate.

@boilzzz · 19.06.2016, 16:34

FloppyDisc, https://jsfiddle.net/boilzzz/uortbab2/3/

@Cdelphi78 · 19.06.2016, 20:52

А ежели просто кнопку картинкой общей вставить?)

@FloppyDisc Особый статус 623 / 221 / 164 Регистрация: 18.11.2015 Сообщений: 1,086
		1
	Вывод картинки за пределы родительского блока 18.06.2016, 13:25. Показов 21253. Ответов 8 Метки нет (Все метки) Здравствуйте! Нужно вывести изображение за пределы некоторой области, как на прикрепленном изображении. Как это можно реализовать? Прост в CSS не очень силен. Фон контейнера заполняется при помощи маленьких изображений размером 10 на 3 пикселя(синий фон), на нем присутствует кнопка, тоже сделана на css и справа надпись. Так вот, нужно как-то либо наложить рисунок с калькулятором или же сделать это вместе объединенно с CSS-кнопкой. Пожалуйста, помогите это реализовать?) Или как по вашему лучше сделать, любые варианты приму) Главное чтобы рабочие были) На данный момент контейнер выглядит как на втором изображении. Миниатюры 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	18.06.2016, 14:56	3
	Сообщение от FloppyDisc Нужно вывести изображение за пределы некоторой области За пределы какой области? Выделите эту область. 0

@FloppyDisc Особый статус 623 / 221 / 164 Регистрация: 18.11.2015 Сообщений: 1,086
	18.06.2016, 22:00 [ТС]	4
	Mikhail Shell, ну просто за область контейнера, посмотрите на второе изображение и первое прикрепленные, должно быть как на первом, прост не понял как еще объяснить, не серчайте 0

@FloppyDisc Особый статус 623 / 221 / 164 Регистрация: 18.11.2015 Сообщений: 1,086
	18.06.2016, 23:43 [ТС]	6
	Сообщение от boilzzz надеюсь принцип понятен boilzzz, извините, немножечко не то) нужно вот так, как на прикрепленном изображении, видимо плохо объяснил) все это должно выходить за рамки синего блока, но при этом оставаться таким же кликабельным как css-кнопка Миниатюры 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	19.06.2016, 13:18	7
	синему блоку relative, картинку внутрь синего блока с position:absolute. Вывести вверх за синий блок отрицательным top, ну и позиционировать относительно кнопки right, left, крутануть под углом rotate. 1

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	19.06.2016, 16:34	8
	FloppyDisc, https://jsfiddle.net/boilzzz/uortbab2/3/ 1

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	19.06.2016, 20:52	9
	А ежели просто кнопку картинкой общей вставить?) 0