将一个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>

- clarkk

Answer 1

可以使用 CSS 属性 z-index 或 JavaScript 样式属性 zIndex。

z-index 定义了层的高度。画布（通常是 body 标签）使用 z-index 0。任何高于该值的内容会显示在 body 上方，任何低于该值的内容会显示在其下方。

CSS 示例：

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

Javascript示例：

<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>

- Spliffster

Answer 2

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

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

这段代码与编程有关。

- thirtydot

---

是的，当然可以。但我刚刚发现我需要相对定位而不是绝对定位，但相对定位会影响其他元素。 - clarkk

е°†position: relative应用于父级div，然后继续使用style.position = "absolute";пјџ - thirtydot