1

Привет, подскажите как сверстать один элемент под другим, что-бы родительский блок сохранил высоту?

Фиддл: http://jsfiddle.net/alpha9000/GEDcH/

P.S. сделал маской прозрачного изображения, мб есть ещё какие варианты?

3
  • а почему нельзя absolute ? ведь у вас родительский div - relative
    – zb'
    10 сен 2013 в 15:50
  • схлопывается height у родительского дива а указать прямое значение не представляется возможным
    – ferrari
    10 сен 2013 в 16:04
  • можно так но надо знать размеры
    – zb'
    10 сен 2013 в 16:11

2 ответа 2

1

вот так можно сделать, через float, не уверен насчет какие браузеры это поддерживают.

div {
    position: relative;
    background: #ccc;
    width: 50%;
    padding: 5px;
    z-index: -2;
}
img {
    width: 100%;
    position: relative;
    float: left; 
    opacity: 0.8;
}
img:nth-child(1n+2) {
    margin-left: -100%;
    z-index: -1;
}
.clear {
    clear: both;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

http://jsfiddle.net/oceog/GEDcH/6/

z-index ввел просто чтобы в условие попасть (как я понял вторая должна быть под первой)

2
  • Да именно, margin-left: -100%; оригинальное решение. Спасибо огромное!
    – ferrari
    10 сен 2013 в 16:41
  • 1
    да я сам удивился :) никогда не понимал float :)
    – zb'
    10 сен 2013 в 16:45
0

http://jsfiddle.net/GEDcH/4/

2
  • вы наверно не сохранили результат, фиддл точно такой же как у меня
    – ferrari
    10 сен 2013 в 16:05
  • сохранил, просто немного не так понял, как вам нужно. посмотрев ответ товарища eicto, я понял что вы имели ввиду =)
    – mountpoint
    10 сен 2013 в 16:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.