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