Çocuk div pozisyonuna kaydırmak için ebeveyn div

Question

Yapmaya çalıştığım şey şu: Kullanıcı, child div '.box' tıklatır ve tıklattığında, ölçekleme tam boyuta gider ve üst div görüntülenir. veya çocuk div'a mükemmel şekilde uyacak şekilde.

Halen gerçekleşmekte olan ana baba, div'un en üst konumuna kaydırılmıyor. Pencere ve ebeveyn div için ofsetleri denedim ve scrollTo ayarlamayı denedim ama sanırım bu işlevin önemli bir bileşenini eksik olabilirim.

Burada deneyin: http://codepen.io/daviddiefenderfer/pen/yOodJd

HTML:

<div id="sidebar"> 
    Question Type: 
    <select> 
    <option>Text</option> 
    <option>Slider</option> 
    <option>Star</option> 
    </select> 
    <button id="zoom" onclick="getFullView()">Zoom Out</button> 
</div> 
<div id="artboard"> 
    <div class="artboard-container"> 
    <div class="box active"> 
     Please select question type 
     <br> 
     <br> 
     <input type="text" placeholder="Question Title"> 
     <div class="answers" > 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

body, html{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#sidebar{ 
    padding: 10px; 
    box-sizing: border-box; 
    width: 15%; 
    height: 100%; 
    background-color: #ccc; 
    float: left; 
} 
#artboard{ 
    box-sizing: border-box; 
    width: 85%; 
    height: 100%; 
    float: right; 
    position:relative; 
} 
.artboard-container{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 
.box{ 
    padding: 50px; 
    text-align: center; 
    float: left; 
    background-color: lightblue; 
    height: 100%; 
    transform: scale(.5); 
    transition: transform .6s; 
    cursor: pointer; 
} 
.box.active{ 
    transition: .6s curve-bezier (0, 1.08, .59, 1); 
    transform: scale(1); 
    position: fixed; 
    top: 0; 
    z-index: 1; 
    cursor: default; 
} 
#zoom{ 
    position: absolute; 
    left: 20px; 
    bottom: 30px; 
} 

JS:

$(document).ready(function(){ 
    $('.box').width($('#artboard').width()); 
}) 

$('.box').on('mouseup', function(){ 
    $(this).addClass('active'); 
    $('#artboard').css('overflow', 'hidden'); 
}); 

function getFullView(){ 
    $('.active').removeClass('active'); 
    $('#artboard').css('overflow', 'scroll'); 
} 

Answer 1

Eğer position:fixed kullanırsanız, top & z-index daha sonra aktif kutu her zaman ekranın üstünde görünecektir.

.box.active{ 
    transition: .6s curve-bezier (0, 1.08, .59, 1); 
    transform: scale(1); 
    top: 0; 
    position: fixed; 
    z-index: 1; 
    cursor: default; 
} 

http://codepen.io/anon/pen/jqGOQN