절대 위치, 누군가 이것을 설명할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

문제

다음은 설명이 필요한 CSS 조각입니다.

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

좋습니다. 분명히 이미지의 절대적인 위치를 지정하는 것입니다.

  1. 상단은 상단의 패딩과 같습니다. 그렇죠?
  2. 남은 50%는 무엇을 하나요?
  3. 왼쪽 여백이 -445px인 이유는 무엇입니까?

업데이트:너비는 860px입니다.차이가 있다면 실제 이미지는 100x100입니다 ??

도움이 되었습니까?

해결책

  1. Top은 html 요소의 상단으로부터의 거리입니다. 이것이 절대 위치를 갖는 다른 요소 내에 있는 경우에는 그 상단으로부터의 거리입니다.

  2. & 삼.이는 이미지의 너비에 따라 다르지만 이미지를 수평으로 중앙에 배치하기 위한 것일 수 있습니다(이미지 너비가 890px인 경우).이미지를 수평으로 중앙에 배치하는 다른 방법도 있습니다.보다 일반적으로 이는 알려진 높이의 블록을 수직으로 중앙에 배치하는 데 사용됩니다(이는 알려진 높이의 블록을 수직으로 중앙에 배치하는 가장 쉬운 방법입니다).

    top: 50%
margin-top: -(height/2)px;

다른 팁

이는 아마도 요소를 페이지 중앙에 배치하기 위해 수행되었을 것입니다( "사점" 기술).

다음과 같이 작동합니다:요소의 너비가 890px이라고 가정하면 다음과 같이 설정됩니다. position:absolute 그리고 left:50%, 이는 왼쪽 가장자리 에서 센터 브라우저의 (음, 이는 다른 요소의 중심이 될 수 있습니다. position:relative).

그런 다음 음수 마진을 사용하여 왼쪽 가장자리를 이동 왼쪽으로 같은 거리만큼 요소 너비의 절반, 따라서 중앙에 위치시킵니다.

물론 이것은 정확히 중앙에 위치하지 않을 수도 있습니다(요소가 실제로 얼마나 넓은지에 따라 다릅니다. width 붙여넣은 코드에는 있으므로 확신할 수는 없지만 페이지 중앙을 기준으로 요소를 배치하는 것은 확실합니다.

상단은 오른쪽 상단의 패딩과 같습니다.

예, 페이지 상단입니다.

남은 50%는 무엇을 하나요?

콘텐츠를 화면 중앙으로 이동합니다. (100%는 오른쪽 끝까지 이동합니다.)

왼쪽 여백이 -445px인 이유는 무엇입니까?

"왼쪽:50%'로 설정하면 왼쪽으로 445픽셀 이동합니다.

위의 스니펫은 ID가 섹션인 요소(div, 범위, 이미지 등일 수 있음)와 관련이 있습니다.

요소에는 x 및 y 방향으로 반복되는 blah.png의 배경 이미지가 있습니다.

요소의 상단 가장자리는 상위 요소도 절대 위치에 있는 경우 상위 요소의 상단에서 0px(또는 다른 단위) 위치에 배치됩니다.부모가 창인 경우 브라우저 창의 위쪽 가장자리에 있습니다.

요소의 왼쪽 가장자리는 상위 요소의 왼쪽 가장자리에서 50% 떨어진 곳에 위치합니다.

그러면 요소가 해당 50% 지점에서 왼쪽으로 445px 이동됩니다.

다음 페이지를 읽으면 알아야 할 모든 내용을 알 수 있습니다. CSS 박스 모델

위치가 절대인 경우 상단은 상위 항목으로부터의 수직 거리입니다(아마도 body 태그이므로 0은 브라우저 창의 상단 가장자리입니다).왼쪽 50%는 왼쪽 가장자리로부터의 거리입니다.음수 여백은 왼쪽으로 445px 뒤로 이동합니다.그 이유에 대해서는 당신의 추측도 나와 마찬가지로 좋습니다.

Captain Obvious처럼 들릴 수도 있으니 최대한 간단하게 설명하겠습니다.

Top은 그 위에 있는 HTML 요소의 상단부터 원하는 픽셀 수를 결정하는 숫자입니다.따라서 반드시 페이지 상단에 있을 필요는 없습니다.CSS를 디자인할 때 HTML 형식에 주의하세요.

왼쪽을 50%로 설정하면 50인 경우 화면 중앙으로 이동해야 합니다.사람들은 화면 크기가 다르며 이미지 중앙이 아닌 이미지의 왼쪽 상단 (0,0)에 할당되므로 예상한 것처럼 화면 중앙에 완벽하게 할당되지는 않습니다. .

이것이 바로 왼쪽 여백을 -445픽셀까지 사용하는 이유입니다. 더 멀리 이동하고 고정하는 것입니다.

행운을 빌어요. 이것이 말이 되기를 바랍니다.다른 답변으로 인해 여전히 어려움을 겪을 경우를 대비해 설명을 다르게 표현하려고 했습니다.그들은 또한 훌륭한 답변이었습니다.

(두 개의 서로 다른 크기의 모니터가 있는 경우 코드를 사용하여 각 수정 사항이 서로 다른 크기의 화면에 어떤 영향을 미치는지 확인하는 것이 좋습니다!)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top