1

I am having real difficulty overlaying my button in the bottom right corner of an image in lightning. My code is like so:

Component

<aura:component controller="AMEXCOMMHomePageController" implements="forceCommunity:availableForAllPageTypes"  access="global">
<ltng:require styles="{!join(',', 
                        $Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system.css')}"
              scripts="{!join(',',
                        $Resource.AMEXCommunityResource  + '/scripts/jquery-3.1.1.min.js')}"
              />
<div class="background">

    <img src="{!$Resource.AMEXCOMM_LandingBannerImg}"/>


            <button class="btn-refer" onclick="{!c.gotoNewApp}">Refer Your Client Now</button>

    </div>

</aura:component>

CSS

.THIS .btn-refer {
    float: right;
    position: absolute;
    margin-right: 20px;
}

.THIS .background {
    padding: 15px 0 15px 0;
    width: 998px;
    height: 248px;
    margin-left: 17px;
}

Image

Button slid over to the left. Needs to be overlayed

EDITT

enter image description here

2
  • Can you post a picture of your current page? Jan 12, 2017 at 13:03
  • @MartinLezer added :)
    – Nebbyyy
    Jan 12, 2017 at 13:05

2 Answers 2

1

Try This

   .THIS .btn-refer {
       right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
}

.THIS.background {
    position: absolute;

}
.THIS img {
    position: relative;
}
1

You should try:

.THIS .btn-refer {
    position: absolute;
    right: 20px;
}

.THIS .background {
    position: relative;
    padding: 15px 0 15px 0;
    width: 998px;
    height: 248px;
    margin-left: 17px;
}

.THIS .background img{
    min-width: 100%;
    width: 100%;
}

The position relative on your background container allows us to position the btn-refer inside the container depending on its size.

13
  • That has just pushed the button even further to the right, off the image :/
    – Nebbyyy
    Jan 12, 2017 at 13:52
  • This is because your image doesn't fit the whole container. Do you want the image to take the whole width of its container? Jan 12, 2017 at 13:54
  • Yeah that would be best
    – Nebbyyy
    Jan 12, 2017 at 15:42
  • Ok I edited my answer. This should work. If the button is too much on the right you can increase the value of the "right: 20px;" until it's good for you. Jan 12, 2017 at 15:45
  • Ive edited the original post to show you what its looking like now
    – Nebbyyy
    Jan 12, 2017 at 15:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .