Как предотвратить схлопывание блока с position: relative;, когда внутри него блок с position: absolute;?
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
}
jsfiddle.net/wtfkz5dx/3 - или так.. а вообще - какая-то странная разметка..