gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:50:30 26 4
gpt4 key购买 nike

<分区>

我正在为我的摄影创建一个网页,基本上我正在尝试创建包含图像的 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;
}

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com