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属性时，阅读它的工作原理可能是一个好主意......：）

Answer 2

just see this fiddle::http://jsfiddle.net/aashi/TVNEV/5/

你必须将图像放在相对div的位置，然后按钮位于位置相对div内的绝对位置

Answer 3

您需要在position: absolute;类

中添加.btn

Answer 4

您应该使用position: absolute。你需要三件事：

确保.btn元素的父级没有position: static，这是默认值。如果您不想移动父母，通常可以将其设置为position: relative;
将您的div设置为position: absolute;
设置top，left，right或bottom属性以放置按钮。在您的情况下，它将是bottom: 0和left: 0。

Answer 5

这个答案可以帮到你

<强> HTML

<div class="container">
    <div class="row_1" >
        <div class="col col-4"> 
            <div class="newstext"> nope nope</div>
            <div class="imageDiv">
                <div class="btn"> a </div>
                <img src="http://dimon12.moy.su/_ph/5/2/242933281.jpg"  width="300" height="350" />
           </div>
       </div>
    </div>
</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; 
}

.imageDiv{position:relative;}
.imageDiv .btn{position:absolute;bottom:0;left:0;}

工作示例

http://jsfiddle.net/Rn3fF/

Answer 6

我只想将图像用作div背景

#the_div {
 background-image: url('your_image.gif');
}


<div id="the_div">
  <div id ="the button"></div>
</div>

Answer 7

请参阅下面的HTML和css

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

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

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

        </div>

CSS

.testing {
position:relative;
}
.btn {
position:absolute;
bottom:0;
left:0;
z-index:999;
}

如何将div放置在图像上方？

7 个答案: