ни позиция абсолютная ни позиция относительная работает хорошо

Question

Когда я нажимаю на div с именем «test», появляется div с именем «outside», с более высоким z-индексом div с именем «внутри».

Моя проблема в том, что я устанавливаю позицию абсолютной для «внутри». Я не могу отнести к краю. И когда я устанавливаю позицию в относительную, он помещает мой div «test» под ним.

Это может быть немного затруднительным для понимания, но проблема действительно проста. Здесь скрипку: http://jsfiddle.net/malamine_kebe/QRpqs/

мой CSS являются:

#insideAbsolute{ 
    background-color:#f8f8f8; 
    position: absolute; 
    top:0; 
    left:20%; 
    width:60%; 
    margin-top:35px; 
    margin-bottom:35px; 
    z-index:3; 
    border-radius: 7px; 
    box-shadow: 6px 6px 20px black; 
} 

#insideRelative{ 
    background-color:#f8f8f8; 
    position: relative; 
    top:0; 
    left:20%; 
    width:60%; 
    margin-top:35px; 
    margin-bottom:35px; 
    z-index:3; 
    border-radius: 7px; 
    box-shadow: 6px 6px 20px black; 
} 


#outside{ 
    position: fixed; 
    left:0; 
    top:0; 
    height: 100%; 
    width: 100%; 
    background-color: black; 
    opacity:0.7; 
    z-index:2; 
    background-attachment:fixed; 
} 

.test{ 
    z-index:1; 
} 

мой HTML:

<div id="outside"></div> 
<div id="insideAbsolute"></div> 
<div id="insideRelative"></div> 

<div class="testAbsolute">test position absolute</div> 
<div class="testRelative">test position relative</div> 

и мой JQuery

$('#outside').hide(); 
    $('#insideAbsolute').hide(); 
    $('#insideRelative').hide(); 

    $(document).on('click', '.testAbsolute', function() { 
     $('#outside').show(0, function() { 
      $('#insideAbsolute').show(0, function() { 
       $(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>'); 
       $(document).on('click','#outside',function(){ 
        $('#insideAbsolute').html(''); 
        $('#outside').hide(); 
       });  
      }); 
     }); 

    }); 

    $(document).on('click', '.testRelative', function() { 
     $('#outside').show(0, function() { 
      $('#insideRelative').show(0, function() { 
       $(this).html('<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>'); 
       $(document).on('click','#outside',function(){ 
        $('#insideRelative').html(''); 
        $('#outside').hide(); 
       });  
      }); 
     }); 

    }); 

Answer 1

Вот маленькая хитрость для вас. Добавьте это в свой CSS:

#insideAbsolute:after{ 
    content:''; 
    height : 35px; 
    width : 100%; 
    position : absolute; 
    bottom : -35px; 
} 

Это создает «поддельный» запас!

Fiddle: http://jsfiddle.net/QRpqs/1/