Javascript CSS-在动画背景前制作内容_Javascript_Html_Css

Javascript CSS-在动画背景前制作内容

javascript html css

Javascript CSS-在动画背景前制作内容,javascript,html,css,Javascript,Html,Css,我有一个来自Codepen的动画背景（下面的链接），但是我不能让我的文本在背景前浮动。我没有包括js，因为我认为它不会有帮助代码笔：截图：我尝试过使用z索引，但使用绝对位置也没有帮助 Index.html注意：我已经删除了不相关的代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.

我有一个来自Codepen的动画背景（下面的链接），但是我不能让我的文本在背景前浮动。我没有包括js，因为我认为它不会有帮助

代码笔：

截图：

我尝试过使用z索引，但使用绝对位置也没有帮助

Index.html

注意：我已经删除了不相关的代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div id="bg"></div>

        <div class="content w3-content" style="width: 80%;margin-left: 10%;">
            <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
        </div>

    </body>

</html>

位置：在大多数情况下，绝对

应与

顶部

、

底部

、

左侧

和/或

右侧

配对。您缺少

top:0

或类似内容。您不需要更改

z-index

.content

在DOM中出现得较晚，因此它将在

#bg

位置上方“绘制”：在大多数情况下，绝对的

应该与

顶部

、

底部

、

左侧

和/或

右侧

成对出现。您缺少

top:0

或类似内容。您不需要更改

z-index

.content

在DOM中稍后出现，因此它将在

#bg

上方“绘制”

首先放置html文本，最后放置bg。

附加

位置：固定到文本容器。首先放置html文本，最后放置bg。
附加位置：固定到文本容器。
文本容器的固定位置将解决此问题
<div  class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed">
        <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
    </div>


莫莉·乌尔斯

我这里有一个工作plunker
文本容器的固定位置将解决此问题
<div  class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed">
        <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
    </div>


莫莉·乌尔斯

当我查看代码笔的源代码时，我无法看到您的.content
div。对不起，我没有解释，我使用了代码笔中的代码，代码笔不是我的代码没有问题。Joseph Marikle已经回答了你的问题，我在回答中添加了一个代码笔作为评论，以帮助你理解这个问题。查看代码笔的源代码时，我看不到您的.content
div。对不起，我没有解释，我使用了代码笔中的代码，代码笔不是我的代码没有问题。Joseph Marikle已经回答了你的问题，我在回答中添加了一个代码笔作为评论，以帮助你理解这个问题。约瑟夫抢在我前面，所以这是他们正在谈论的一个密码。我刚刚添加了正确的位置CSS以使文本居中。由于上面答案中列出的原因，文本基本上是在屏幕外显示的。Joseph抢先告诉了我，所以这是他们正在谈论的内容的密码笔。我刚刚添加了正确的位置CSS以使文本居中。由于上述答案中概述的原因，文本基本上不在屏幕上。为了记录，这也适用于position:absolute
。主要问题是没有指定屏幕上元素的位置。在本例中，不是指定.content
元素的位置，而是将.content
HTML移到.bg
HTML的上方。仅为记录，这也适用于位置：绝对
。主要问题是没有指定屏幕上元素的位置。在本例中，.content
元素的位置没有指定，而是将.content
HTML移到了.bg
HTML的上方。