JSFiddle

Question

我制作了100％高度和宽度的图像。但我的下面有一些标题和段落。在查看我的网站时，我无法进一步向下滚动以查看标题和段落？此外，我想在顶部的图像顶部有一个小汉堡导航栏。但是，由于图像全屏显示，这也被“推开”了？

<!doctype html>
<html lang="en">
<head>
    <meta charset = "utf-8"/>
    <title>XXXXX</title>
<link rel = "stylesheet" href="s.css"/>

</head>
<body>
    <nav id = "burger">
    </nav>

    <section id = "top_image">
        <img src="images/bg1.png"/>
    </section>

    <section id = "description">
        <article>
            <header>
                <h4>DESCRIPTION</h4>
            </header>
            <p>
                XXXXXX<br />
                XXXXXXXXXXX<br />
                XXXXXXXX
            </p>
            <p>
                XXXXXXX<br />
                XXXXXXX<br />
                cXXXX<br />
                XXXXXXX
            </p>
        </article>
    </section>

CSS

img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

Answer 1

制作图像（或者在本例中为所有img标签）position: absolute时，将它们从页面布局流程中取出。这意味着其他一切渲染就像那个图像不存在。您的菜单栏和段落位于图像下方，但您无法看到它们。如果你使段落文本足够长，它会戳出底部。如果您希望图像成为页面布局的一部分，请删除position: absolute.

暂时将此内容添加到您的CSS中，看看发生了什么：

#description {
    position: relative;
    z-index: 100;
}

你会突然在图像上看到你的文字。

Answer 2

问题不在于事情被推倒，问题在于您的图像覆盖了页面上的所有其他元素，因为您已经完全定位了它。你无法滚动，因为没有什么可以滚动到。

如果您尝试将图像用作背景图像，则应将其编码为背景图像。

body {
    background:url('http://placehold.it/1024x768');
    background-size:cover;
}

如何让网站向下滚动

2 个答案:

JSFiddle