сложное перекрытие DIV и видимость с помощью CSS

Question

Я ищу объект изображения, который выглядит так, как будто он «закреплен» сбоку моей страницы с фиксированной шириной.но это кажется противоречивым - чтобы стилизовать его, div с изображением должен быть в отдельном div, чем основное содержимое, но для того, чтобы он работал в макете, div с изображением не может бытьотдельный div от основного контента.

Трудно объяснить словами, поэтому взгляните на эту демонстрацию, которую я взбил вместо этого.если вы будете: http://www.hinchy.us/demo.html

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

Answer 1

#red { z-index: 3; }
#green-right{ z-index: 2; }
.blue { z-index: 4; width: 950px; }
.orange { left: auto; right: -140px; margin-left: -108px; -margin-right: 0px; }

Я добавил эти строки в конец ваших стилей, чтобы решить проблему в IE6 / 7. Учитывая модель с багги-блоками в более старом IE, я бы порекомендовал другую схему размеров / позиционирования для красных и синих блоков, чтобы они соответствовали ширине во всех браузерах.

Answer 2

То есть «закрепленный» смысл, даже если вы прокручиваете страницу, она остается фиксированной вверху и справа?Если это так, вы бы хотели:

.orange {
position: fixed;
top: 0px;
right: 0px;
}

Answer 3

.orange { position:relative; z-index:5; }

Чтобы получить оранжевый над зеленой линией.Имеет ли значение IE6 / IE7?