CSS 상대 및 절대 포스팅

내 웹 사이트의 그림 안에 링크 div를 배치하려면 CSS relative 및 absolute를 사용하고 있습니다. 문제는 링크가 왼쪽/오른쪽으로 이동하는 웹 페이지를 확대/축소 (또는 휴대 전화에서 웹 페이지보기)하는 경우입니다. 링크를 사진의 같은 위치에 두려면 어떻게해야합니까?CSS 상대 및 절대 포스팅

웹 사이트 : www.cclandscaping.org

CSS 코드 :

<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>

출처

2013-04-14 Shane

제공되는 HTML/CSS는 "문제"를 재현하는 것만으로는 충분하지 않습니다 : 나는 또한 그것을 중심으로 http://tinker.io/8568f – cimmanon

경우 헤더 클래스의 CSS입니까? 중첩 된 div에서 header-links 클래스를 사용해 보셨습니까? – nmat

오, 죄송합니다. 그곳에 있어야만하는 것은 아닙니다 ... 코드가 변경되고 문제가 지속됩니다. – Shane

.header-pic은 너비가 있어야합니다.

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

출처

2013-04-15 01:20:24 nmat

이것이 문제를 해결할 것이라고 확신했지만 크기가 적용되면 .header-link의 위치를 조정해야합니다. 그렇지 않으면 링크가 더 중앙에 위치하게됩니다. .header 링크를 'right : 7 %'로 변경해보십시오 (원하는대로 조정하십시오) – Scott

굉장! 그게 문제를 해결 했어. 고마워, nmat! – Shane

상대 링크가 절대 이내 일 것 : 및

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

그림 코드를 연결합니다.

e. 귀하의 CSS에서 절대와 친척을 교환하십시오.

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

링크는 절대 div 외부로 이동할 수 없습니다.

출처

2013-04-14 14:08:02 surfer190

이렇게하면 헤더가 원하는대로 이동하지만 링크는 더 이상 헤더 상단에 놓이지 않습니다. 머리글 상단에 배치 할 수 있기를 원합니다. – Shane

CSS 상대 및 절대 포스팅

답변

관련 문제