Css – fixed position of button above image

css

I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:

border:none; 
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;

Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.

jsFiddle: jsFiddle

Best Answer

The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.

However, that is only the issue, try using something like:

<div class="image-div>
  <img src="src_to_file.png" alt="photo" />
  <button class="button">Button</button>
</div>

You can use this as the css:

.image-div {
position: relative;
}
.button {
position: absolute;
}

Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Html – Vertically align text next to an image

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <span style="">Works.</span>
</div>

Tested in FF3.

Now you can use flexbox for this type of layout.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

Best Answer

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

Html – Vertically align text next to an image

Related Topic