div를 다른 요소 아래에 배치

Question

나머지 요소없이 div를 다른 요소 아래에 배치하려면 div 요소의 영향을 받습니까?

<div style="margin:50px"> 
    <div style="margin:20px; padding:10px; width:100px"> 
     here is a little <span id="test" style="font-weight:bold">test</span>.. some text some text some text some text 
    </div> 
</div> 
<script> 
    var elm = document.getElementById('test'); 
    var div = elm.appendChild(document.createElement('div')); 
    with(div){ 
     style.position = 'relative'; 
     style.left = elm.offsetLeft+'px'; 
     style.background = '#ffffff'; 
     style.width = '100px'; 
     style.height = '50px'; 

     innerHTML = 'wooop'; 
    } 
</script> 

Answer 1

style.left = elm.offsetLeft + "px";

Answer 2

CSS 속성 Z- 색인 또는 자바 스크립트 스타일 속성 zIndex를 사용하십시오.

z- 색인은 레이어의 높이를 정의합니다. 캔버스 (일반적으로 body 태그)는 Z- 인덱스 0을 사용합니다. 더 높은 값은 몸체보다 높고 아래 값은 낮은 값입니다.

CSS 예 :

<style type="text/css"> 
.my_layer { 
    display: block; 
    position: absolute; 
    z-index: 10; 
    top: 10px; 
    left: 10px; 
    width: 100px; 
    height: 100px; 
} 
</style> 

는 자바 스크립트 예 :

<script type="text/javascript"> 
    el = document.getElementById("my_div") 
    with(el) { 
    style.zIndex = 10; 
    style.display = "block"; 
    style.position = "absolute"; 
    style.top = "10px"; 
    style.left = "10px"; 
    style.width = "100px"; 
    style.height = "100px"; 
    } 
</script>