Problemi di posizionamento del testo DIV su immagine DIV con CSS

Sto creando una pagina Web per la mia fotografia e fondamentalmente sto cercando di creare caselle div che contengono le immagini, con un div per il testo visualizzato sull'immagine. Per qualche motivo non riesco a capire come rendere la posizione div di testo dal div dell'immagine. Ad esempio, attualmente "top: 8%;" posiziona il testo dell'8% dalla parte superiore della pagina, non dalla parte superiore del div dell'immagine, nonostante il fatto che il testo div stia con l'immagine div nel codice e sia posizionato relativamente.Problemi di posizionamento del testo DIV su immagine DIV con CSS

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; 
}

fonte

2013-08-30 Josh Graham

Questo non risponde alla tua domanda, ma ti consiglio di utilizzare uno strumento come http://fancyapps.com/fancybox/. Sembra piuttosto interessante e puoi usare l'attributo "alt" per visualizzare quel contenuto sotto l'immagine. Ad esempio: http://jsfiddle.net/2LXNh/ Oppure dai un'occhiata ad altre cose interessanti che può fare! – Cooleronie

Con il testo "sopra" l'immagine, vuoi dire sovrapposta sopra le immagini, o in realtà sopra l'immagine. – DrewP84

Dai un'occhiata a questo tutorial: http://css-tricks.com/text-blocks-over-image/ – DrewP84

Questa è una domanda frequente. La tua risposta: 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; 
}

fonte

2013-08-31 00:11:02 Cooleronie

Grazie mille, mi occuperò di questo adesso! –

Basta impostare il z-index nel CSS. Gli elementi numerati più alti appaiono sopra gli elementi numerati più bassi. Mentre puoi semplicemente dare agli elementi numeri interi contigui; generalmente, ti consigliamo di fornire ampi spazi tra gli elementi inferiori e superiori nel caso in cui sia necessario aggiungere elementi aggiuntivi o modificare la stratificazione degli elementi.

fonte

2013-08-31 00:46:44 ZeroPhase

Problemi di posizionamento del testo DIV su immagine DIV con CSS

risposta

Problemi correlati