Question

我正在使用css relative和absolute来定位我网站上的图片内的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>

Answer 1

.header-pic必须有宽度。我也把它集中在一起：

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

Answer 2

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

IE中。在你的CSS中用绝对值交换相对值。

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

链接将无法移出绝对div。

CSS相对和绝对定位

2 个答案: