У меня есть квадратное квадратное изображение с красной полосой, которая проходит вдоль левой стороны и имеет прозрачный фон (белый бит), который я создал в Photoshop. Я хотел бы разместить изображение за этой рамкой. Я попытался установить position:absolute
и z-index: -1;
однако он помещает изображение за все. Есть ли способ, которым я могу добиться этого только с помощью CSS? PS Я искал решения, но те, с которыми я столкнулся, вроде бы не помогли мне вообще.
CSS:
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: -1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
}
Вы не можете надежно установить z-index
без установки position
на своих элементах; укладка также относится к контейнерам элементов, поэтому, если все находится на корневом уровне, изображение с отрицательным z-index
исчезнет за страницей. (Лично я стараюсь избегать отрицательных значений z-index
когда это возможно.)
#boxes {
position: relative;
}
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: 1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
position: relative;
z-index: 2;
}
Проблема в том, что ваш HTML структурирован, поэтому красная полоса - это фоновое изображение контейнера, в который вы загружаете изображение. Поскольку это также имеет background-color
, изображение теряется за ним.
Лучшим способом сделать это будет использование естественного потока документов HTML/CSS, т.е. Чем позже элемент появится в HTML, тем выше он находится в естественном z-индексе. Это будет означать, что вам не нужно указывать значения z-index
, но вам нужно будет добавить презентационный div
в ваш код (если вы не хотите обезьяны с помощью :after
псевдоэлементов):
Каждый серый квадрат должен выглядеть следующим образом:
<div class="grey box">
<h3><a href="#">Stationary</a></h3>
<a href="#" class="normal"><span class="border"> </span><img src="http://placekitten.com/g/361/220"><div class="innerBox"> </div></a>
</div>
... и ваш CSS должен измениться. Удалите фон из стилей .box
и добавьте это в свой CSS:
#boxes .innerBox {
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
Затем вы можете удалить z-index из #boxes.box
и потому, что после изображения в вашей разметке будет отображаться div innerBox
, он, естественно, окажется выше вашего изображения.
Если вы не можете добавить какой-либо дополнительный HTML-код в свой шаблон разметки, вы можете перераспределить border
div, которые, похоже, не очень много:
#boxes .border
{
border:none;
z-index:1;
cursor:pointer;
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
Вам также необходимо обновить свои изображения:
#boxes img {
/* other declarations */
position: absolute;
left: 4px;
top: 0;
/* other declarations */
}
... и убедитесь, что ваш #boxes.box
style имеет position: relative;
задавать.
Это должно сделать вас: http://jsfiddle.net/mr3Fq/4/