Problems positioning text DIV over image DIV with CSS

Question

I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.

HTML:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon" 
      type="image/png" 
      href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>

<body>

<div id="wrapper">

<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table> 

<div id="home" data-speed="10" data-type="background">
  <div></div>
</div>

<div id="ukrainetext">
    <img id="ukraine" src="images/ukraine.jpg"/>
    <p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>

<div id="cornwalltext"> 
    <img id="cornwall" src="images/cornwall.jpg"/>
    <p id="cornwalltextp">Cornwall,<br>England</p>
</div>

<div id="moscowtext">       
    <img id="moscow" src="images/moscow.jpg"/>
    <p id="moscowtextp">Moscow,<br>Russia</p>
</div>

</div>  

</body>

</html>

CSS:

html, body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background: #3e3e3e;
}

#wrapper {
    min-width: 640px;
    margin-bottom: 0;
}

#menu { 
    background: #5d5d5d;
    font-family: "Kozuka Gothic Pro";
    font-size: 20px;
    font-weight: lighter;
    color: white;
    height: 50px;  
    margin: 0 auto;
    margin-bottom: 0.3%;
    width: 100%; 
    max-width: 1920px; 
    min-width:640px;
    position: relative; 
    z-index:99;
}

table td {
    padding-top: 13px;
}

#josh-graham {
    font-size:25px;
    padding-top: 6px;
    padding-left: 5px;
}

#ukrainetext {
    position: relative;

}

#ukrainetextp {
    font-family: "Kozuka Gothic Pro";
    font-size: 25px;
    font-weight: lighter;
    color: white;
    position: absolute;
    left: 80%;
    margin-top: 6%;
}

#ukraine { 
    height: auto;
    margin: 0.3% auto; 
    width: 100%; 
    max-width: 1920px;
    position: relative; 
    float: left;
}   

#cornwalltext {
    position: relative;

}

#cornwalltextp {
    font-family: "Kozuka Gothic Pro";
    font-size: 25px;
    font-weight: lighter;
    color: white;
    position: absolute;
    left: 80%;
    margin-top: 25%;
}


#cornwall { 
    height: auto;
    margin: 0.3% auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    float:left;
}


#moscowtext {
    position: relative;

}

#moscowtextp {
    font-family: "Kozuka Gothic Pro";
    font-size: 25px;
    font-weight: lighter;
    color: white;
    position: absolute;
    left: 80%;
    margin-top: 43.5%;
}


#moscow { 
    height: auto;
    margin: 0.3% auto;
    margin-bottom: 0.3%;
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    float:left;
}

This does not answer your question, but I would advice you to use a tool like http://fancyapps.com/fancybox/. It looks pretty cool and you can use the "alt" attribute to display that content below the image. Like so: http://jsfiddle.net/2LXNh/ Or check out some other cool stuff it can do! — Cooleronie, Aug 31 '13 at 00:06
By text "over" the image, do you mean overlaid on top of the images, or actually above the image. — DrewP84, Aug 31 '13 at 00:08
Check out this tutorial: http://css-tricks.com/text-blocks-over-image/ — DrewP84, Aug 31 '13 at 00:12
Thanks for all the input guys! I'll look at the tutorials and suggestions you've provided. DrewP84, I want the text over layed over the image as opposed to positioning it above the image on the page if that makes sense! — Josh Graham, Sep 01 '13 at 14:06

score 7 · Answer 1 · edited May 23 '17 at 12:16

This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/

HTML:

<div id="container">
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
    <p id="text">
        Hello World!
    </p>
</div>

CSS:

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

Thanks very much, I'll have a go at working this in now! – Josh Graham Sep 01 '13 at 14:06 — Josh Graham, Sep 01 '13 at 14:06

score 0 · Answer 2 · answered Aug 31 '13 at 00:46

Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.

Problems positioning text DIV over image DIV with CSS

2 Answers2