A simple image above everything (includes posts) - html

Question

I am quite new at coding, and I would love spend a lot of time with it, but now I really do not have time for that. I spent two weeks to trying to find out this thing.
I made my portoflio on tumblr. And I used a theme, where the pictures are filling the whole screen, so you can not basically anything, but pictures. Which is good, I wanted it like this. BUT. I would like to leave a little note, actually a pointing arrow picture which says: "keep scrolling for more". So this note is always hidden by the full-sized images.
How can I move the note-image on the very top? Above the image posts?
Which is the easiest way?
I tried some resolution, i have found here, but none of them worked...
I thought would not be a problem, but this is my portfolio, and I still could not send it, because of this issue.
Thank you so much for any help. Sorry for being so dumb.
This is my portfolio.

Answer 1

I don't have experience with tumblr, but based on your tags it looks like it uses HTML and CSS. When you have an image that fills the entire screen and want to add an image on top of that image, you need to have both images within a div container to give them something to reference. This container needs to have position: relative and the style of the images will be relative to it. So, your HTML and CSS should look something like this:
HTML
<div class="container">
<img class="imageOne" src="path/url goes here" alt="" />
<img class="imageTwo" src="path/url goes here" alt="" />
</div>
CSS
.container {
position: relative;
top: 0px;
left: 0px;
}
.imageOne {
position: relative;
top: 0px;
left: 0px;
}
.imageTwo {
position: absolute;
top: 30px;
left: 30px;
}
So your first image is set to 0 pixels from the top and 0 pixels from the left. This mates it to the container div you created to hold the images and set it to the same positioning. Your second image is position: absolute to the container div so it is 30 pixels from the top and 30 pixels from the left and was loaded after your first image and thus placed on top!
Cheers!

Answer 2

You can do it just adding the property z-index: xx to the image (or actually whatever) you want to be above anything else. Also, you can combine it with position absolute or fixed.
div { width: 100px; height: 100px; }
.container {
position: absolute;
top: 0px;
left: 0px;
}
.green {
position: relative;
left: 20px;
top: 20px;
background-color: green;
z-index: 1;
}
.pink {
position: relative;
left: 80px;
top: 0px;
background-color: pink;
z-index: 3;
}
http://codepen.io/paulirish/pen/CgAo
here you can see various examples, credit for Tom Wiltzius