CSS相对定位和绝对定位

Question

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

网站：www.cclandscaping.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>

- Shane

---

提供的HTML/CSS不足以复制“问题”：http://tinker.io/8568f - cimmanon

头部类的CSS在哪里？你尝试过嵌套div中的 header-links 类吗？ - nmat

哦，抱歉，那个不应该在里面...代码已经更改，问题仍然存在。 - Shane

Answer 1

.header-pic 必须有宽度。我还把它居中了：

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

- nmat

---

我已经验证了这将解决您的问题，但是您需要调整.header-links的定位，因为现在应用了一个大小，否则链接将更加居中。尝试将.header-links更改为“right: 7％”（根据您的喜好进行调整）。 - Scott

Answer 2

相对链接应该在绝对链接内。

即在您的 CSS 中将相对链接与绝对链接交换。

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

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

- tread

---

这样可以使链接随着页眉移动，这正是我想要的，但是链接不再位于页眉顶部。我希望能够将它们放置在页眉顶部。 - Shane