Display one element on top of another

user_13105395 0
Viewed 1390

I want to display 2 links on top of an image in the example you see below. Tried a few different things but can not get it to work. Not sure if I am confusing inline/block elements and that's why I can't display it properly. Not sure if I am miss using a href attribute along with div elements. I tried using display : grid as well but may not have used it properly. I reverted my code back to basics in hopes someone here can guide me in the right direction

example of browser

img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 100%;
  height: auto;
}

p{
    text-align: center;
    font-size: 20px;
    font-family: OCR A Std, monospace ;
    text-decoration: none;
}

.note{
    margin-top: 100px;
    margin-bottom: 50px;
}

.img2{
  width: 100%;
}

.button{
    width: 200px;
    height: 40px;
  text-decoration: none;
  background-color: rgba(219, 193, 142);
  margin-bottom: 20px;
  display: block;
    margin-left: auto;
    margin-right: auto;
}

.buttonint{
    color: black;
    text-decoration: none;
}

a:link{ 
    text-decoration: none;
}

.block{
    width: auto;
    height: 20px;
    background-color: rgba(219, 193, 142);
}
<img src="images/portfolioAni.gif">
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>
<img src="images/web.jpg" class="img2">
    <a href="Project.html"><div class="button"><p class="buttonint">HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Javascript</p></div></a>
<div class="block"></div>

display overlay css html
5 Answers

Use position: absolute in a wrapper with position: relative:

main { position: relative; display: grid; place-items: center; }

div { position: absolute; }

button { display: block; width: 200px;}
<main>
<img src="https://loremflickr.com/400/180/computer"/>
<div>
 <button>HTML & CSS</button>
 <button>JavaScript</button> 
</div>
</main>

Because the page will be rendered from top to bottom if you write the img first in the dom the div will be above by default.

user_12481770

use z-index.

its a CSS property that changes what elements are on top of each other. The higher the value, (the value is an Integer) the more visible the affected element is.

*note that you still need to change the position by yourself

use a z index of 0 on the image and a z-index of 1 on the buttons. assuming there is no elements behind the image and the buttons, nothing should disappear.

user_167909970

Another solution is to put your links in a container and show image as background image of the container:

img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 100%;
  height: auto;
}

p{
    text-align: center;
    font-size: 20px;
    font-family: OCR A Std, monospace ;
    text-decoration: none;
}

.note{
    margin-top: 100px;
    margin-bottom: 50px;
}

.img2{
  width: 100%;
}

.button{
    width: 200px;
    height: 40px;
  text-decoration: none;
  background-color: rgba(219, 193, 142);
  margin-bottom: 20px;
  display: block;
    margin-left: auto;
    margin-right: auto;
}

.buttonint{
    color: black;
    text-decoration: none;
}

a:link{ 
    text-decoration: none;
}

.block{
    width: auto;
    height: 20px;
    background-color: rgba(219, 193, 142);
}

.imgbg
{
  background-image: url("https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 30em;
  display: grid;
  align-content: center;
  align-items: end;
}
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>
<div class="imgbg">
    <a href="Project.html"><div class="button"><p class="buttonint">HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Javascript</p></div></a>
</div>
<div class="block"></div>

user_29300380

Structured the image and the buttons in a div as container, and the buttons in one div also. And then set the container div to have position: relative;, this will let the buttons div be positioned relative to the container. and then set the buttons div to have position: absolute; top:50%; left:50%, this will positioned the buttons div 50% from the top and the left of the container, and z-index: 1000, this will place the buttons div floating on the image.

.container-image-button {
  position: relative;
}

.buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
}
<div class="container-image-button">
  <img src="images/web.jpg" class="img2">
  <div class="buttons">
    <a href="Project.html"><div class="button"><p class="buttonint">HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Javascript</p></div></a>
  </div>
</div>

You can also see another reference in: Floating Div Over An Image

user_105382950

You need to use position: relative and position: absolute.

Put a div around the img and whatever you want to place on top. Set the div to position: relative. Then whatever you want to position on top you should give position: absolute. You can also center the element that has position: absolute; using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.

user_100008570
Related