Как предотвратить схлопывание блока с position: relative;, когда внутри него блок с position: absolute;?

Question

[Legioner911]

Собственно пример: jsfiddle.net/Jegioner911/wtfkz5dx

Делаю я это для того что бы блок .red не падал за остальные а прижимался как следующий после .abs-block за счёт того что он обернут блоком .rel-block у которого relative

Answer 1

[Юрий]

1. Для того чтобы работало position: absolute; обязательно указывать top, left..etc
2. Не нужно указывать внутреннему блоку position: absolute; , у которого внешний position:relative;
для этих целей чтобы разместить его внутри относительно внешнего необходимо также указать position:relative..(position:relative работает, даже если мы не укажем top left)
3.И для .rel-block необходимо overflow:hidden;

.rel-block{
    position:relative;
    width:100%;
    background:#ccc;
    overflow:hidden
}
.abs-block{
    position:relative;
    width:100%;
    height:250px;
    background: #000
}
.red{
    width:100%;
    height:100px;
    background:#ff0000
}

Answer 2

[holfza]

jsfiddle.net/wtfkz5dx/3 - или так.. а вообще - какая-то странная разметка..