Asp.net CSS相对和绝对位置

我正在使用css相对和绝对定位在我的网站上的图片内的链接div。问题是当我放大/缩小网页（或在手机上查看网页）时，链接会向左/向右移动。如何使链接保持在图片上的相同位置

网站：www.ccglishing.org

CSS代码：

.header-links {
        position: absolute;
        z-index: auto;
        right: 25%;
        top: 43%;
        font-size: x-large;
    }
    .header-pic {
        position: relative;
    }

图片和链接代码：

<div class="header-pic"; style="text-align: center">
        <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Header.png" />
        <div class="header-links">
                <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Pages/About.aspx">About</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Pages/References.aspx">References</asp:HyperLink>
                &nbsp;|&nbsp; 
                <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Pages/ContactUs.aspx">Contact Us</asp:HyperLink>
    </div>

家
|  
关于
|  
工具书类
|  
联系我们

相对链接应在绝对范围内

例如，在css中用绝对值替换相对值

.header-links {
        position: relative;
        z-index: auto;
        right: 25%;
        top: 43%;
        font-size: x-large;
    }
    .header-pic {
        position: absolute;
    }

---

链接将无法移动到绝对分区之外。

。标题pic

必须具有宽度。我还把它放在中心：

.header-pic {
    margin: 0 auto;
    position: relative;
    width: 1100px;
}

---

提供的HTML/CSS不足以重现“问题”：header类的CSS在哪里？你试过嵌套div中的header links类吗？哦，对不起，它不应该在那里。。。代码被更改，问题依然存在。这使得链接与标题一起移动，这正是我想要的，但是链接不再位于标题的顶部。我希望能够将它们放置在标题顶部。我已验证这将解决您的问题，但您需要调整标题链接的位置。现在应用了一个大小，否则链接将更加居中。尝试将标题链接更改为“右：7%”（根据您的喜好进行调整）