Перекрывающееся изображение в фотошопе, как плавать с помощью CSS

Question

Вот сайт, над которым я работаю:

http://graves -incorporated.com / test_sites / solera2012 / тест / домашний pg.html

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

Я бы, конечно, сохранил его как png для сохранения прозрачности, но я даже не знаю, с чего начать, чтобы он плавал над существующими 2 изображениями

Пожалуйста, помогите!

Answer 1

На <td>, который содержит ваше изображение (назовем его <td class="imageholder">):

td.imageholder { position: relative; }

Оттуда решение cenk будет работать независимо от окна браузера.

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

Answer 2

Вот начало:

HTML

   <img src="your-transparent-file.png" id="rightAligned"/>

CSS

img#rightAligned {
   position: absolute;
   top: 50px; // adjust
   right: 20px; // adjust
}