时间戳

首页 > 解决方案 > 二级导航链接（绝对和相对定位）（CSS）

css-position - 二级导航链接（绝对和相对定位）（CSS）

问题描述

我所有的二级标题导航链接只能去（左上、左下、右上等）。

目前启用为“左上角”，但是我希望这四个链接中有两个是“右上角”。

当前代码运行良好，除了在 75% 调整大小标记之后，链接混乱。

@media screen and (min-width: 800px)
{
    a[href="/terms-of-use"] 
    {
        position:absolute;
        right:120px;
    }

    a[href="/privacy"]
    {
        position:absolute;
        right:200px;
    }
}

标签： css-position

解决方案

据说在 flex-box 中使用绝对定位不会可靠地工作。我猜想，因为我在 Firefox 和 Chrome 中查看您的网站并没有看到问题，所以您正在 Safari 中查看您的网站，在那里可以看到问题。

无论如何，由于上述原因，我建议使用 Javascript 将导航项移动到所需位置。然后，添加一些额外的 CSS 以使这些新移动的项目看起来像其他项目。

首先，删除您添加的用于处理这些导航项的 CSS。

然后通过站点范围的页脚代码注入添加它：

<script>
(function() {
    var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
    var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
    var i;

    for (i=0; i<targetLinks.length; i++) {
        targetParent.appendChild(targetLinks[i]);
    }
})();
</script>

最后，通过 CSS 编辑器添加：

body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
    margin: 0 .618em;
    padding: .618em 0;
    font-family: myriad-pro;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
    padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
  display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
  display: none;
}

推荐阅读