Layout 定位div元素而不进行服务器端计算

我已经创建了一个站点，它有一个动态构建的菜单，根据后端的一些数组，它可以拉出选项卡。选择一个选项卡将再次获取整个页面，并根据所选选项卡应用不同的css类

基本上，我使用

style=“position:absolute；left:xxxxpx”

在后端计算

xxxx

我想更改站点，使gui更加独立于后端

我不确定如何继续改变这一点，使所有的布局计算是由css。我在考虑使用css变量，并保留基本相同的代码，但我不确定如何确定哪个节点以及它应该偏移多远

我当前的代码 选择第一个选项卡

用于计算位置的后端代码：

$tabwidth=132；
$widthmodifier=200；
对于（$mainpageCounter=1；$mainpageCounter两个图像之间的left属性相同？我不明白你想要什么。你为什么决定在后端计算选项卡位置？这是一个奇怪的决定。你应该使用相对定位来制作更好的HTML布局。我在使用相对定位时遇到了问题，并且在g是固定的。一开始我只有两个选项卡，所以我可以硬编码它，但后来它变成了动态的，我更新它从后端设置。现在我正在使用ajax调用重新编码它，相对定位将是一个要求，而不仅仅是一个选项。在图像之间，左属性是相同的？我不明白你想要什么。为什么你决定在后端计算选项卡位置了吗？这是一个奇怪的决定。你应该使用相对定位来制作更好的HTML布局。我在使用相对定位时遇到了一些问题，并且得到了修复。一开始我只有两个选项卡，所以我可以硬编码它，但后来它变成了动态的，我将其更新为设置为f现在我正在使用ajax调用对其进行重新编码，相对定位将是一个要求，而不仅仅是一个选项。
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> <a href="https://talentcloud.local/DesignManager">Design Manager</a>Project Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;"><a href="/ProjectManager">Project Manager</a></div>

<div class="topTab tab-admin noprint" style="left: 204px;"><a href="/Administration">Administration</a></div>
<div class="topTab tab-design noprint" style="left: 336px;"> <a href="https://talentcloud.local/DesignManager">Design Manager</a>Project Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>

.tab-admin{
    background-color: var(--admin-tab-bg);
}

.tab-design{
    background-color: var(--design-tab-bg);
}

.tab-project{
    background-color: var(--project-tab-bg);
}

.topTabSelected {
    position: absolute;
    top: 31px;
    z-index: 8;
    color: white;
    font-weight: bold;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: transparent;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    width: 120px;
    height: 17px;
    text-align: center;
}

.topTab {
    position: absolute;
    top: 31px;
    z-index: 2;
    color: white;
    font-weight: bold;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    width: 120px;
    text-align: center;
}

.topTab a {
    text-decoration: none;
    color: white;
}

.topTab a:hover {
    text-decoration: underline;
    color: white;
}

$tabwidth = 132;
$widthmodifier = 200;

for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
        $topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
        $topTabDivEnd = "</div>\n";

        if ($p == $mainpageCounter) {
            echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
        } else {
            echo $topTabDivStart . "<a href=\"/" . $mainpage[$mainpageCounter]["urlPart"] . "\">" . $mainpage[$mainpageCounter]["title"] . "</a> $topTabDivEnd";
        }
        $widthmodifier += $tabwidth;
}