Question

我正在为我的摄影创建一个网页，基本上我正在尝试创建包含图像的div框，并在图像上显示文本div。出于某种原因，我无法弄清楚如何从图像div中创建文本div位置。例如，目前“最高：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;
}

Answer 1

这是一个经常被问到的问题。你的答案：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;
}

Answer 2

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

使用CSS将文本DIV定位在图像DIV上时出现问题

2 个答案: