编辑:修复它，我很愚蠢。这是因为 h1 在 div 下面。
所以我正在为一个学校元素制作一些网页，但我一直遇到这个恼人的问题，我试图在页面上制作一个图片库，其中包含多个缩略图，所有缩略图都在页面上的有序类别中。例如因为它是视频游戏主题，所以它应该像英雄和 map 。问题是当我放置一个图像时，图像将我在屏幕顶部的文本推到它下面，可能是一个非常简单的解决方案，只需要一点帮助。谢谢。 here is the link
CSS:
@font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
最佳答案
你可以通过多种方式实现它
方式一:
你可以为文本应用 z-index
例如文本'welcome'在h1里面
h1
{
z-index:999;
}
方式二: 把你的图片作为div的背景
关于html - CSS图片div的定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38896205/