CSS Позиционирование Головоломка

Question

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

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

Любые предложения будут приветствоваться.

http://www.gumpshen.com/images/layout.png

Answer 1

Если я вас правильно понимаю, это мой ответ:

Если серый - заголовок, просто относитесь к нему, как хотите.

Затем создайте div "content" с желтым, красным, зеленым и синим цветом, который должен быть относительно . Оттуда вы можете абсолютно расположить синие так, чтобы они перекрывали желтый, красный и зеленый. Тогда с некоторой z-индексацией у вас должно быть то, что вам нужно.

Answer 2

это должно быть то, что вам нужно ...

Ваш CSS должен выглядеть примерно так:

    <!-- add CSS Reset before this -->

#header {
    background-color:#888;
    height:100px;
}

#content {
    position:relative;
    float:left;
}

#topleft {
    position:relative;
    float:left;
    width:50%;
    background-color:yellow;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#topright {
    position:relative;
    float:left;
    width:50%;
    background-color:red;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomleft {
    position:relative;
    float:left;
    width:50%;
    background-color:green;
    z-index:3;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    min-height:100px;               
}

#bottomright {
    position:absolute;
    left:49%;
    bottom:0;
    width:50%;
    padding:20px 0 0 17px;
    background-color:blue;
    z-index:2;
    min-height:100px;               
}

Ваш HTML должен выглядеть примерно так:

<div id="header">
    <h1>Header</h1>
</div>
<div id="content">
    <div id="topleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="topright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomleft">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div id="bottomright">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

примечание:"lorem ipsum", непрозрачность и минимальная высота добавлены только для показа:)

Answer 3

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

Answer 4

Я предполагаю, что у вас уже есть цветные блоки.

Теперь вы можете поместить исходное изображение в синее поле в качестве фона, расположить справа внизу и расположить полупрозрачную версию этого изображения (или использовать прозрачность CSS) абсолютно справа внизу вашей оболочки. Полупрозрачное изображение поверх оригинала не будет отображаться, оно будет отображаться только в окружающих прямоугольниках.

Answer 5

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

Вы также можете придать своему изображению фоновое изображение, например:

#MyImage {
  padding: 20px 0 0 20px;
  background: url(images/image-background.jpg) top left no-repeat;
}

Изображение будет посередине с фоном, отображаемым по краю. Тогда ваше изображение может быть, скажем, 200x100px, с фоновым изображением 220x120px.