позиционирующие элементы CSS для наложения (Wordpress Theme)

<body style = "background-color: yellow"> 
<div style = "background-color: red; width: 300px; height: 300px"> 
</div> 
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;"> 
</div> 
<div style = "background-color: orange; width: 300px; height: 300px"> 
</div> 
</body>

https://jsfiddle.net/e2n32pof/ проблемыпозиционирующие элементы CSS для наложения (Wordpress Theme)

Извинения для ужасной диаграммы, если вы хотите, чтобы подделывать страницы, я установить его на:

http://amigoscardiff.co.uk/contact

Я работаю над сайтом Wordpress. Он использует одну из тем «все-в-одном», и у меня нет большого опыта, кроме CSS. У меня есть три элемента, которые я пытаюсь собрать определенным образом. По сути, первый элемент - это изображение, которое находится ниже заголовка. Второй элемент - это изображение, которое накладывает первое изображение. И третий элемент, который будет сидеть ниже первого элемента. Смотрите рисунок ниже:

enter image description here

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

"top: -100px".

Я не уверен, как решить эту проблему, особенно если вы не используете необработанный файл html для поиска и устранения неполадок. Любое разъяснение было бы замечательным, или если есть еще один способ решить проблему, я бы с удовольствием это услышал.

источник

2015-07-13 user3062123

Добавить 'краю дна: -100px ; 'к тому же элементу, который вы применили' top: -100px; 'to. – connexo

Нам нужно увидеть больше кода, чтобы дать точный ответ. Я подозреваю, что вы пытаетесь использовать 'top' на статически позиционированном элементе. – Jason

извините за поздний ответ. https://jsfiddle.net/e2n32pof/ демонстрирует проблему. Я пытаюсь сделать так, чтобы не было пустого пробела, вместо этого в него входил оранжевый кирпич – user3062123

я не полностью понимаю ваш вопрос, но один из них, мы надеемся, поможет:

https://jsfiddle.net/roLzL23n/

<div style = "background-color: red; width: 300px; height: 300px"> 
</div> 
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;"> 
</div> 
<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px"> 
</div>

Или

https://jsfiddle.net/ftees7jt/

<div style = "background-color: red; width: 300px; height: 300px"> 
</div> 

<div style = "background-color: green; width: 300px; height: 300px; margin-top: -200px;"> 
</div> 

<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px"> 
</div>

источник

2015-07-13 23:37:34 NickMcB

позиционирующие элементы CSS для наложения (Wordpress Theme)

ответ

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