css - 如何操纵div中的绝对位置

Question

请帮我处理这段代码.. 这只是一个示例布局.. 我希望文本覆盖 div.. 所以看起来 div 将成为文本的背景

<div>Krishnais so beautiful</div>
<div class="box"></div>

css

.box{
    top:0px;
    left:0px;
    position:absolute;
    border:1px solid blue;
    background-color:blue;
    width:100px;
    height:100px
}

Answer 1

您必须使用 z-index 设置文本定位（绝对或相对）：

.text{
    position:relative;
    z-index:1;
}

为了操纵 Z 轴，您可以使用 z-index 属性。但是您只能为定位元素操作此属性。

小提琴

Answer 2

摆脱Position: absolute;+top和left

.box{
    top:0px;           #delete
    left:0px;          #delete
    position:absolute; #delete
    border:1px solid blue;
    background-color:blue;
    width:100px;
    height:100px
}

jsfiddle