定位文本DIV與CSS的圖像DIV的問題

我正在爲我的攝影創建一個網頁，基本上我正在嘗試創建包含圖像的div框，並在圖像上顯示文本的div。出於某種原因，我無法弄清楚如何從圖像div創建文本div的位置。例如，目前「最高：8％」;儘管事實上文本div在代碼中與圖像div相對並且相對定位，但是將文本從頁面的頂部放置8％而不是放置在圖像div的頂部。定位文本DIV與CSS的圖像DIV的問題

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

來源

2013-08-30 Josh Graham

這並不回答你的問題，但我會建議你使用像http://fancyapps.com/fancybox/這樣的工具。它看起來很酷，您可以使用「alt」屬性在圖像下方顯示該內容。像這樣：http://jsfiddle.net/2LXNh/或者查看一些其他很酷的東西，它可以做！ – Cooleronie

通過文字「在圖像之上」，你的意思是覆蓋在圖像的上方，或者實際上在圖像的上方。 – DrewP84

查看本教程：http://css-tricks.com/text-blocks-over-image/ – DrewP84

這是一個經常被問到的問題。您的回答：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; 
}

來源

2013-08-31 00:11:02 Cooleronie

非常感謝，我現在就開始努力吧！ –

只需設置在你的CSS的z-index。編號較高的元素出現在較低編號的元素上雖然你可以給元素連續的整數，一般來說，如果您需要添加其他元素或更改元素的分層，則需要在較低元素和較高元素之間提供較大的間隔。

來源

2013-08-31 00:46:44 ZeroPhase

定位文本DIV與CSS的圖像DIV的問題

回答

相關問題