How to add a button over image

Question

Hope you're all staying safe during these strange times!

How do you a place a button over an image (see here)?

I'm using Visual Studio, Jekyll and Github.

I've tried copy and pasting this exact coding into Visual Studio, but it turned out like this.

No matter what I do with the CSS, I can't move the button up onto the image.

I was hoping to ask you guys, because I'm totally lost.

Thanks so much everyone!

-- Complete newbie at coding

You can find a similar solution here https://stackoverflow.com/questions/45030184/clickable-image-button — Isabel Inc, Apr 29 '20 at 02:17

Joel Hager · Answer 1 · 2020-04-29T01:24:59.383

0

You can put it as a child of the picture container, and then absolutely position it.

.container {
  position: relative;
  width: 50vw;
  height: 25vh;
  background-color: #999999;
  border: 3px dotted black;
}

.btn-group {
  position: absolute; 
  bottom: 10%;
  left: 5%;
  border: 2px dotted red;
}

<div class="container">
<div class="btn-group">
  <button id="btn1">Request Proposal</button>
  <button id="btn2">Learn More</button>
</div>
</div>

edited Apr 29 '20 at 01:24

answered Apr 29 '20 at 00:56

Joel Hager

2,990
3
15
44

Thanks Joel for getting back to me :) I put your code in, but the buttons still can't move. I tried adjusting the absolute position to 100px, but the buttons remain in the same place. Please see here for screenshots: https://imgur.com/a/MfmdBVc Please let me know what I can do :) Appreciate your help! – Tee Apr 29 '20 at 01:18
What do you mean by 'can't move?' I just used static values for the position. I can easily make it scalar and it'll all move around accordingly. – Joel Hager Apr 29 '20 at 01:23
What I mean is that when I change the values (see here - https://imgur.com/a/MTMNcJ3 ), the button still remains in the same place (which is below the background image). See here for what it looks like: imgur.com/a/MfmdBVc. No matter how I change the numbers in the coding, the buttons don't move up onto the image. – Tee Apr 29 '20 at 05:41
Did you see the HTML markup I used? The button group has to be a child element of the container in order to absolutely position itself relative to the parent container. – Joel Hager Apr 29 '20 at 05:43

score 0 · Answer 2 · answered May 01 '20 at 17:37

Can you post your code in a code snippet or fiddle? Joel's answer should do the trick so it is something going wrong in your code. Check both the image and the button elements are within a container div and that the position properties of both elements are correct - position: relative (for the container div) position: absolute (for the button) You can then play around with the position of the button with top/bottom and left/right properties.

How to add a button over image

2 Answers2