2012-08-13 5 views
5

위치를 사용하는 사이트에서 작업하고 있습니다 : 상대적 div 포함 위치 : 절대 divs. 나는 내가 믿는 개념을 이해하고, top 속성을 수행 할 수없는 것을 제외하고는 모든 것이 훌륭하게 작동합니다. 왼쪽 작품이지만 맨위는 아닙니다. 다음과 같이 내 코드는 다음과 같습니다CSS 위치 : 절대 위치 포함 : 상대 "위쪽"작동하지 않음

<div id="imagemenu"> 
    <div class="west"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/west.png" alt="west"> 
    </div> 
    <div class="southwest"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/southwest.png alt=" southwest "> 
    </div> 
    <div class="south "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/south.png " alt="south "> 
    </div> 
    <div class="logo "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/logo.png " alt="Making Music Store "> 
    </div> 
</div> 

CSS

#imagemenu { 
    position: relative; 
} 
.logo img { 
    position: absolute; 
    width: 20%; 
    top: 50%; 
    left: 40%; 
} 
.west img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.southwest img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.south img { 
    position: absolute; 
    left: 35%; 
} 

사이트는 adams-web.net/makingmusicstore 내가 상단 속성이 작동하도록 할 수있을 때까지 엉망이 현재. 그것은 나에게 로고가 훨씬 더 페이지 아래에 있어야한다고 생각하지만 그것이해야한다고 믿는 것처럼 작동하지 않습니다. 내가 뭘 놓쳤는 지 모르겠다. 그것은 정적으로 위치를 바꿀 때 작동하지만 위치를 올바르게 유지하지는 못합니다.

답변

7

이봐 지금 absolute 상단 사업부 이와 같이

에 사용되는 최고 %보다 부모 DIV 높이을 정의하는 데 사용보다 당신이 당신의 부모 div의 높이를 정의하지 않으면

.parent { 
    position: relative; 
    height: 100px; 
} 
.child { 
    position: absolute; 
    top: 50%; 
} 

px value in top

.child { 
    top: 100px; 
} 
+0

물론! 답변 해 주셔서 감사 드리며, 오랫동안이 작업을 해 보았습니다. –

5

예를 들어 #imagemenu

widthheight를 추가

#imagemenu { 
    width: 100%; 
    height: 400px; 
} 

다음 position: absolute가 작동되지 않거나 다시 있는지 확인하세요.

관련 문제