CSS 도움말 - 요소의 이미지가 위쪽 테두리를 초과합니다.

Question

회사 로고가 머리글 요소 위에 있고 그 일부가 PSD 디자인에 포함되어 있습니다. 로고가 부분적으로 상단 경계를 초과합니다.

무언가는 다음과 같습니다. http://img193.imageshack.us/img193/5589/headerrc.png 단색으로 채워진 사각형은 테두리를 초과해야하는 로고입니다.

가장 접근하기 쉬운 방법으로 이것을 수행하는 가장 좋은 방법은 무엇인지 궁금합니다. 이미지로 모두 잘라낼 수 있지만 HTML 요소를 사용하여 디스플레이를 만드는 것을 선호합니다.

미리 환호하십시오.

Answer 1

당신은 HTML 설정을 전혀 설명하지 않았기 때문에 매우 광범위하게 제안 할 수 있습니다.

margin-top: -30px; 

는 다른 방법 :

position: relative; 
top: -30px; 

Answer 2

당신은 그냥 로고를 추진하기 위해 CSS 내에서 음의 여백을 사용할 수

#logo { margin-top: -20px; } 

Answer 3

당신은 그것을 절대적 위치를 직접 좌표를 설정하고, 아직도 당신이 필요한 경우는 중심을 지킬 수있다. 다음은 간단한 예입니다.

 
    #header { 
     margin-top: 30px; 
     width: 100%; 
     height: 100px; 
     position: relative; 
    } 

    #logo { 
     left: 50%; 
     margin-left: 100px; 
     top: 10px; 
     height: 50px; 
     width: 50px; 
     position: absolute; 
    } 

여백을 왼쪽으로 설정하면 가운데에서 멀리 떨어지게 설정할 수 있습니다. #logo의 '상단'이 #header의 'margin-top'보다 작 으면 머리글 위에 위치합니다.