Html 如何更改进度条的位置？（CSS）

在我的公司，我们使用一个提供一些布局模板的调查软件/平台。该平台允许CSS修改，我想将进度条放置在更靠近其上方标题图像的位置

当前用于这些元素的CSS代码为：

/**标题图像*/

div.questionnaire-header {
background: url("/images/uploaded/UMUQJ98W9N1N");
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}

html .progress-area .progress-bar {
background-color: #666666;
background-image: none;
}

---

/**进度条*/

div.questionnaire-header {
background: url("/images/uploaded/UMUQJ98W9N1N");
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}

html .progress-area .progress-bar {
background-color: #666666;
background-image: none;
}

我尝试使用以下方法：

html .progress-area {
  top: 220px;
}

然而，这给手机带来了问题；它使进度条显示在以下内容的“上方”

HTML代码（我希望是相关的，我是初学者）如下所示。标题：

<DIV class='questionnaire-header'>
</DIV>

<div class="progress-area progress0"><div class="progress-bar progress-bar-graphical"><div class="progress-completed" style="width: 9%"></div><div class="progress-textual-area"><div class="progress-textual">9%</div></div></div></div>

对于进度条：

<DIV class='questionnaire-header'>
</DIV>

<div class="progress-area progress0"><div class="progress-bar progress-bar-graphical"><div class="progress-completed" style="width: 9%"></div><div class="progress-textual-area"><div class="progress-textual">9%</div></div></div></div>

9%

如果该CSS在移动设备上产生问题，则修改该CSS，使其不适用于移动设备。 改用这个：

@media (min-width: 1100px) {
html .progress-area {
  top: 220px;
}}

上面的代码将使用您上次提供的CSS，但仅在大小至少为1100px的屏幕上应用它。因此，不要在手机上

---

如果您想要一个仅适用于1100px以下屏幕上移动设备的代码，请将

minwidth

值更改为

max width

为什么不使用media query为移动设备的top属性设置不同的值？你能简单介绍一下你的例子吗？我非常感谢你的意见！然而，这会导致两件事：（1）水平转动手机时，进度条会显示在手机下方内容的上方（基本上在屏幕的中间）和（2）添加我以前使用的代码时（在媒体查询之外）-为了使进度条更接近桌面上的标题，而不是屏幕上的标题-即使在手机上，进度条也会向下显示。有什么想法吗？谢谢如果你有影响你的手机的CSS，那么简单地把CSS放在我给你的代码中，这样CSS只影响桌面。除非你有链接或密码笔，否则我无法告诉你更多。