如何将按钮定位到图像的右下角？答案

【问题标题】：How to position a button to the bottom right side of an image?如何将按钮定位到图像的右下角？
【发布时间】：2019-10-18 01:00:00
【问题描述】：

我有一个离子幻灯片盒，它可以显示图像。我想在图像的右下方添加一个按钮ion-plus-round。我不想将它添加到滑块的右下角，而是仅添加到 img 的右下角。

<ion-slide-box class="item-slide-box">      
      <ion-slide ng-repeat="image in vm.item.images" ng-cloak >
        <img ng-src="{{image}}">

      </ion-slide>     
    </ion-slide-box>
   <a class="button icon ion-plus-round myButton"></a>

我已完成以下操作，但我想知道如何让按钮成为 img 内的 float: right：

.slider {
height: 60vh;
background-color: #76838f;
position: relative;
}

.slider-slide {
 color: #000;
 background-color: #76838f;
 height: 100%;
} 

.slider .slider-slide .img-ng {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-width: 100%;
    position: relative;
}

.slider .slider-pager {
    bottom: 45px;
}

 .myButton {
    position: absolute;    
    bottom: 0px;
    right: 0px;
}

代码盘：http://codepen.io/anon/pen/gPYBpR

【问题讨论】：

你能创建一个jsfiddle或代码sn-p吗？欢迎使用 stackoverflow。
嘿，我不知道该怎么做。我可以发布输出的屏幕截图
你必须在某个时候学习，所以我将解释如何使用它:) 转到jsfiddle.net 并输入你的 HTML、CSS 和 JavaScript 代码。默认情况下，javascript 代码在页面加载时运行，但如果您想创建自己的事件侦听器，您可以通过转到 javascript 面板中的齿轮图标并将其更改为“no wrap in head”来更改设置。键入代码进行试验时单击运行，完成后单击“保存”。然后分享您的问题的链接，供所有人查看:)
codepen.io/anon/pen/gPYBpR 抱歉，我刚看到你的消息，我继续前进，发现一个离子代码挂起，然后把我的代码放在那里
我试图让按钮位于 img 的右下角 :(

标签： css ionic-framework

【解决方案1】：

我刚刚编辑了你的代码，你可以在代码窗格中尝试一下，看看它是否满足你的要求。

HTML代码：

<ion-slide-box class="item-slide-box">      
          <ion-slide ng-cloak class="content">     
            <img class="img-ng" ng-src="http://geomorph.sourceforge.net/fourier/Bouboule256.jpg">
            <a class="button icon ion-plus-round myButton"></a>     
          </ion-slide>     
        </ion-slide-box>

添加一些 css 行，例如：

 .content{    
    position:relative;
}

.content a{

    position:absolute;
    bottom:5px;
    right:5px;
}

注意：从 css 中删除“.myButton” css 并将按钮放在图像源之后，如代码所示，希望这正是您想要的。

例如，如果您真的希望按钮完全位于图像上，只需按照示例代码进行操作，您可以在代码中实现此代码。

HTML：

  <div class="main">
    <img src="http://placehold.it/182x121"/> 
    <a href="#">Can be BUTTON/LINK</a>
  </div>

CSS：

 .main{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
}

.content a {
    position:absolute;
    bottom:5px;
    right:5px;
    background:blue;
    color:#FFF;
}

上面的代码可以帮助你在图像上给出按钮。

【讨论】：

感谢阿吉特。这与我的目标非常接近！谢谢你