vertical positioning within div

Question

I have a container that adjusts to the size of a background image. I have a small button that I would like to be about three quarters to the right and three-quarters of the way down the container. Is there any way to make that happen?

Here's basically what I have: https://jsfiddle.net/geekongirl/emL0gjod/8/

.button {
  position: absolute;
  left: 75%;
  top: 75%;
}

<div class="container">
  <div class="button">
    <button class="btn btn-default">button</button>
  </div>
  <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/02/65/14/5957873074946eb.jpg" style="width: 100%;" />
</div>

score 2 · Answer 1 · answered Jul 12 '19 at 19:55

Add position: relative to container

.button {
    position: absolute;
    left: 75%;
    top: 75%;
}
.container {
  position: relative;
}

<div class="container">
    <div class="button">
        <button class="btn btn-default">button</button>
    </div>
    <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/02/65/14/5957873074946eb.jpg" style="width: 100%;" />
</div>

https://jsfiddle.net/tdLbuzga/

vertical positioning within div

1 Answers1