2016-09-14 2 views
0

Я немного новичок во всем этом, поэтому моя терминология может быть немного изворотливой.Разместите изображения за пределами контейнеров контента

На этой странице - halfbakedharvest.com - есть изображения, которые появляются на краю экрана - вне основных областей содержимого/контейнеров. Это происходит в каждом сообщении в блоге и, независимо от длины сообщения, эти изображения отображаются в одном и том же относительном положении.

Как это сделать?

Я пробовал Google для ответов, но я не должен использовать правильную терминологию, потому что ничего не нашел. Может быть, это так просто, как плагин, который я мог бы использовать?

Если это помогает моему сайту использовать структуру генезиса, и я уверен, новичок, когда дело доходит до редактирования php и css.

+0

Щелкните правой кнопкой мыши, проверьте элемент. То, что вы ищете, находится только внутри тега , скопируйте html и css. – Nath

ответ

0

Как сказал Нат, проверка элементов выявит, что они используют абсолютное позиционирование. MDN absolute positioning

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

body { 
/* what you want to position relative to */ 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

img { 
    position: absolute; 
    top: 30%; 
    right: 0; 
} 

Обратите внимание на относительное позиционирование на корпусе. demo

Смежные вопросы