网上下载了一个html动画效果，是全屏自适应的，想要添加其他元素进去，但是发现会不再全屏自适应

相关代码（插入的按钮代码只是其一的示列）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*********</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--悬浮css样式,可重叠 -->
<style>
p.pos_fixed
{
    position:fixed;
    top:40px;
    right:40px;
    color:#CC9999;
}

</style>

<link rel="stylesheet" href="static/css/normalize.min.css">
<link rel="stylesheet" href="static/css/style.css">

</head>
<body>
<!--右上角文字 -->
<p class="pos_fixed"><big>
岁月向来慷慨又温柔 擅长把好坏都<em>带走</em><br>
&nbsp;<br>
新的一年如约而至 新的一岁亦是如此<br>
&nbsp;<br>
愿你<i>野蛮生长</i>，成为自己的<b>月亮</b>🌙</big></p>

<a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>

<canvas id="canvas"></canvas>

<script src='static/js/zdog.dist.min.js'></script>
<script src='static/js/lodash.min.js'></script>
<script src="static/js/script.js"></script>

</body>
</html>
包含的主要css动画预览位置

https://sc.chinaz.com/jiaobendemo.aspx?downloadid=1202230012386

我的解答思路和尝试过的方法

尝试过 CSS Position(fixed定位) ，但是好像只能有一个

我想要达到的结果

有没有办法使这个绵羊css动画变小一点放到想要的位置，或者是使用其他手段在绵羊动画周边添加其他元素而不影响本身的全屏自适应呢

按钮也要放到fixed定位的容器里面，要不按钮单独一行了会出现滚动条，因为canvas高度宽度用的可视窗宽度，高度，改下面就可以了

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5可爱的小绵羊动画特效 - 站长素材</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/css/normalize.min.css">
    <link rel="stylesheet" href="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/css/style.css">
    <style>
        p.pos_fixed {
            position: fixed;
            top: 40px;
            right: 40px;
            color: #CC9999;
        }
        .btns{position:fixed;left:0;top:0}
    </style>

</head>
<body>
    <!--右上角文字 -->
    <p class="pos_fixed">
        <big>
            岁月向来慷慨又温柔 擅长把好坏都<em>带走</em><br>
            &nbsp;<br>
            新的一年如约而至 新的一岁亦是如此<br>
            &nbsp;<br>
            愿你<i>野蛮生长</i>，成为自己的<b>月亮</b>🌙
        </big>
    </p>
    <div class="btns">
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Neon button
        </a>
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Neon button
        </a>
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Neon button
        </a>
    </div>
    <canvas id="canvas"></canvas>

    <script src='https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/zdog.dist.min.js'></script>
    <script src='https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/lodash.min.js'></script>
    <script src="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/script.js"></script>

</body>
</html>

img


有其他问题可以继续交流~

img