Html 项目在调整窗口大小时移动

最近，我试图为一个博客编写我的第一个主题，但当我垂直调整窗口大小时，我的头像移动有问题

我知道这是一个常见的问题，但我已经尝试了给出的许多解决方案，但都没有成功。我尝试将元素包装在一个

中，并添加

位置：绝对但是化身继续移动。我还尝试将父函数与
position:relative
放在一起，并将相关元素与
position:absolute
嵌套在一起（这是术语吗？），但没有效果。除了阿凡达，其他所有东西都保持不变。以下是css：

  .avatar {
    position: fixed;
    left: 40px;
    bottom: 400px;
    border-radius: 100%;
    padding: 10px;
    border-radius: 90px;
    border: 3px solid white;
  }
  .descripbox {
      position: fixed;
      left: 45px;
      top: 222px;
  }
  .titlebox {
      position: fixed;
      left: 45px;
      top: 210px;
  }
  .home {
      position: fixed;
      left: 190px;
      top: 60px;
  }
  .ask {
      position: fixed;
      left: 210px;
      top: 85px;
  }
  .themes {
      position: fixed;
      left: 220px;
      top: 110px;
  }

以下是html：

<img class="avatar" src="{PortraitURL-128}">
    <div class="descripbox">
        {block:Description}
        <h2>{Description}</h2>
        {/block:Description}
    </div>
    <div class="titlebox"
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>
    <div class="home">
        <li><a href="/">home</a></li>
    </div>
    <div class="ask">
        <li><a href="/faq">ask</a></li>
    </div>
    <div class="themes">
        <li><a href="/tagged/themes">themes</a></li>
    </div>


{块：描述}
{说明}
{/block:Description}
在ur代码中，一个div标记未关闭。请在关闭标签后进行检查

正确的一点：

<div class="titlebox">
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>



关闭以下标记

<div class="titlebox"
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>

在您的代码中，div标记之一未关闭。请在关闭标签后进行检查

正确的一点：

<div class="titlebox">
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>



关闭以下标记

<div class="titlebox"
    <h1><a href="{BlogURL}">{Title}</a></h1>
    </div>

我不知道它是否正确？
你需要这样吗？
div元素中缺少右大括号


.阿凡达{
位置：固定；
左：40px；
底部：400px；
边界半径：100%；
填充：10px；
边界半径：90px；
边框：3倍纯白；
}
.DescriptBox{
位置：固定；
左：45像素；
顶部：222px；
}
.标题栏{
位置：固定；
左：45像素；
顶部：210px；
}
.家{
位置：固定；
左：190px；
顶部：60px；
}
.问{
位置：固定；
左：210像素；
顶部：85px；
}
.主题{
位置：固定；
左：220px；
顶部：110px；
}
{块：描述}
{说明}
{/block:Description}



我不知道它是否正确？
你需要这样吗？
div元素中缺少右大括号


.阿凡达{
位置：固定；
左：40px；
底部：400px；
边界半径：100%；
填充：10px；
边界半径：90px；
边框：3倍纯白；
}
.DescriptBox{
位置：固定；
左：45像素；
顶部：222px；
}
.标题栏{
位置：固定；
左：45像素；
顶部：210px；
}
.家{
位置：固定；
左：190px；
顶部：60px；
}
.问{
位置：固定；
左：210像素；
顶部：85px；
}
.主题{
位置：固定；
左：220px；
顶部：110px；
}
{块：描述}
{说明}
{/block:Description}



只需移除底部：400px

只需移除底部：400px

我想你已经从
底部确定了你的头像位置：400px，而不是尝试从顶部创建您的化身位置。它成功了，谢谢！但是我可以问一下，为什么会这样做吗？
固定
定位是相对于窗口的。如果指定基于窗口顶部的位置，它将粘在窗口顶部，从底部调整浏览器大小不会影响它，反之亦然。只有当浏览器窗口的坐标改变时，它才会移动。@pastel:在这种情况下，你固定了从底部到底部的高度，你应该始终远离底部500像素，现在你从底部到顶部改变了依赖关系。所以它现在是顶级依赖：）xDCheers@JackHasaKeyboard@b0y我想我现在明白了，谢谢！我想你已经从
底部确定了你的头像位置：400px，而不是尝试从顶部创建您的化身位置。它成功了，谢谢！但是我可以问一下，为什么会这样做吗？
固定
定位是相对于窗口的。如果指定基于窗口顶部的位置，它将粘在窗口顶部，从底部调整浏览器大小不会影响它，反之亦然。只有当浏览器窗口的坐标改变时，它才会移动。@pastel:在这种情况下，你固定了从底部到底部的高度，你应该始终远离底部500像素，现在你从底部到顶部改变了依赖关系。所以它现在是顶级依赖：）xDCheers@JackHasaKeyboard@b0y我想我现在明白了，谢谢！抢手货谢谢，接得好！谢谢