5

我正在为我的摄影创建一个网页，基本上我正在尝试创建包含图像的 div 框，并在图像上显示一个用于文本的 div。出于某种原因，我无法弄清楚如何从图像 div 中制作文本 div 位置。例如，目前“top: 8%;” 将文本放置在距页面顶部 8% 的位置，而不是图像 div 的顶部，尽管文本 div 与代码中的图像 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;
}
4

2 回答 2

6

这是一个经常被问到的问题。您的答案：如何在 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-31T00:11:02.750 回答
0

只需z-index在您的 CSS 中设置。编号较高的元素出现在编号较低的元素上方。虽然你可以给元素连续的整数；通常，您需要在较低和较高元素之间提供较大的间隙，以防您需要添加其他元素或更改元素的分层。

于 2013-08-31T00:46:44.453 回答