html - 如何让 div 位于图像上方？

Question

这是我得到的:

HTML

<div class="container">
  <div class="row_1" >

    <div class="col col-4"> 
    <div class="newstext"> nope nope</div>
     <div class="btn"> a </div>

       <img src="http://dimon12.moy.su/_ph/5/2/242933281.jpg"  width="300" height="350">


    </div>

CSS

.container {
    width:960px;
    margin: 0 auto 0 auto;


}

.row {
    overflow:hidden;
    margin: 0 0 20px 0;
    }

.col {
float:left;
margin:0 10px 0 10px;


    }

.col-4 {
    margin-bottom:20px;
    z-index:-100;

}

.col-12 {
    width:940px;
    height:135px;
   font-family: "proxima-nova"; 
   color:#f1e39b; 
    letter-spacing: .2em;
   font-size:45px;
  padding-top: 50px;

}

.newstext {
    height:50px;
    font-size:10px;
    font-family: "proxima-nova";
    padding-left:10px; padding-top:10px;
    z-index:1;
    background-color:#f1e39b;
    }

.btn{
width:50px;
height:50px;
background-color:#993;
border-radius:25px;
z-index:100;
bottom: 10px;
left: 10px; 
}

我想要的是让 .btn 位于图片的左下角。所以 btn div 必须在图片“上方”。我通过 z-index 尝试过，但没有用。

有什么想法吗？

这是我目前的样子 http://jsfiddle.net/TVNEV/1/

Answer 1

在你的CSS的各个类中添加以下内容

.col-4 {
 position:relative;
}
.btn {
 position:absolute;
 bottom:0;
}

JSFiddle

旁注:当您要使用新的 css 属性时，阅读它的工作原理可能是个好主意……:)