CSS图片div的位置

Question

编辑：修复它，我很傻。 这是因为h1低于div。

因此，我正在为学校项目制作一些网页，但我一直遇到这个烦人的问题，我试图在页面上制作一个包含多个缩略图的图像库，这些缩略图全部按页面顺序排列。 例如，由于它是以电子游戏为主题的，因此应该像英雄和地图一样。 问题是当我放置图像时，图像将我在屏幕顶部的文本推送到其下方，这可能是一个非常简单的解决方案，只需要一点帮助。 谢谢。 链接在这里

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>

Answer 1

您可以通过多种方式实现它

方法1：

您可以将z-index应用于文本

例如，文本“ welcome”在h1中

h1
{
z-index:999;
}

方法2：将您的图片作为div的背景

https://jsfiddle.net/ogyk1914/

CSS图片div的位置

问题描述

1 个解决方案

解决方案1
0 2016-08-11 12:30:08

CSS图片div的位置

问题描述

1 个解决方案

解决方案1 0 2016-08-11 12:30:08

解决方案1
0 2016-08-11 12:30:08