html - 我如何将引导按钮放在另一个相对位置的 div 上？

Question

<div class="fadein">
                 <img src="images/banner1.jpg">
                 <img src="images/banner2.jpg">
                 <img src="images/banner3.jpg">



            </div>

above is my code for slide show with following css -

 .fadein { position:relative;
            margin-top:0px;
            top: 0px;

            }

.fadein img { position:absolute; left:0; top:0; }
.fadein img { width:100%;  }

im trying to overlay a button or a link upon this slideshow below is the anchor which i want to overlay , kindly suggest something , i am using following style rules but they are just not working .

   <a class="signup" href="#">Get Started</a>

     .signup{
position: absolute;
background: #F50 none repeat scroll 0% 0%;
color: #FFF !important;
margin-top: 20px;
margin-right: 5px;
width: 160px;
padding: 12px;
border-radius: 30px;
top: 450px;
left: 72px;
font-size: 20px;
text-align: center;
    }

Answer 1

我不知道为什么图像是绝对定位的，我认为这是 slider 的一部分。

但是，具有 fadein 类的父元素必须具有环绕图像的高度和宽度。

然后链接需要位于带有图像的内部 div，以便可以相对于包装器进行定位。

 .fadein {
   position: relative;
   margin-top: 0px;
   top: 0px;
   width: 320px;
   height: 240px;
 }
 .fadein img {
   position: absolute;
   left: 0;
   top: 0;
 }
 .fadein img {
   width: 100%;
   height: auto
 }
 .signup {
   position: absolute;
   background: #F50 none repeat scroll 0% 0%;
   color: #FFF !important;
   margin-top: 20px;
   margin-right: 5px;
   width: 160px;
   padding: 12px;
   border-radius: 30px;
   top: 10%;
   /* or whatever */
   left: 10%;
   /* or whatever */
   font-size: 20px;
   text-align: center;
 }

<div class="fadein">
  <img src="http://lorempixel.com/output/city-q-c-640-480-7.jpg" alt=""> <a class="signup" href="#">Get Started</a>

</div>