스타일 = "위치 : 절대"와 스타일 = "위치 : 상대"의 차이점

103

누구든지 내가 / / 요소에 추가하는 경우 차이점 style = "position:absolute"과 차이점을 말할 수 있습니까 ?style = "position:relative"divspaninput

나는 absolute지금 사용하고 있지만 나도 탐구하고 싶다 relative. 이것이 포지셔닝을 어떻게 바꿀까요?

css css-position

— 바룬
소스

1

CSS 2.1 의 'position'속성 .

— Josh Lee

@rolfl 흠,이 편집은 3 년 된 질문에 정말로 필요 했습니까? 나는 그것을 "너무 사소하다"라고 불렀을 것이다.

— Mr Lister 2013

3

@MrLister '제안 된 편집'리뷰 대기열에 올랐습니다 .... 나이를 몰랐습니다. 하지만 60 초짜리 질문 이었다면 차이가 있었을까요?

— rolfl 2013

@rolfl 정말 아닙니다. 나는 여전히 "너무 미성년자"로 투표했을 것입니다.

— Mr Lister 2013

178

절대 위치 지정은 요소가 페이지 레이아웃의 정상적인 흐름에서 완전히 벗어나는 것을 의미합니다. 페이지의 나머지 요소에 관한 한 절대 위치 요소는 단순히 존재하지 않습니다. 그런 다음 요소 자체는 left, right, top and bottom속성 을 사용하여 지정한 위치에 다른 모든 것보다 "위에"개별적으로 그려집니다 .

이러한 속성과 함께 지정한 위치를 사용하여 요소는 static위치 속성이 지정되지 않은 경우 (페이지 요소가 기본적으로 정적으로 지정됨) 또는 문서 본문 (브라우저) 이외의 위치 속성이있는 마지막 상위 요소 내의 해당 위치에 배치됩니다. 그러한 조상이 존재하지 않는 경우.

예를 들어,이 코드가 있다면 :

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>브라우저 뷰포트 상단에서 20px, 왼쪽 가장자리에서 20px에 위치합니다.

그러나 다음과 같이했다면 :

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... 그런 다음 innerdiv는 div 상단에서 outer20px, 왼쪽 가장자리에서 20px outer위치에 배치됩니다. position:static왜냐하면 div를 명시 적으로 사용하도록 설정했기 때문에 div가 배치되지 않았기 때문 position:relative입니다.

반면에 상대 위치 지정은 위치 지정이 전혀 없음을 나타내는 것과 같지만 left, right, top and bottom속성은 일반 레이아웃에서 요소를 "너지"합니다. 페이지의 나머지 요소는 요소가 정상적인 위치에있는 것처럼 여전히 배치됩니다.

예를 들어,이 코드가 있다면 :

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... 그러면 세 <span>요소가 모두 겹치지 않고 나란히 배치됩니다.

다음 <span>과 같이 상대 위치를 사용 하도록 두 번째 를 설정하면 :

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... 그런 다음 Span2는 Span1의 오른쪽을 5px만큼 겹칩니다. Span1과 Span3은 첫 번째 예제에서와 똑같은 위치에 있으며 Span2의 오른쪽과 Span3의 왼쪽 사이에 5px의 간격을 남깁니다.

그것이 조금 명확 해지기를 바랍니다.

— AgentConundrum
소스

39

상대 위치 : 요소는 뷰포트 좌표 축에서 오프셋 된 위치에 자체 좌표 축을 만듭니다. 문서 흐름의 일부이지만 변경되었습니다.

절대 위치 : 요소는 상위 요소 중에서 가장 가까운 사용 가능한 좌표 축을 검색합니다. 그런 다음이 좌표 축에서 오프셋을 지정하여 요소의 위치를 지정합니다. 문서 일반 흐름에서 제거됩니다.

출처

— Premraj
소스

15

'A List Apart' 에서이 포지셔닝 기사 를 확인하고 싶을 것 입니다. CSS 포지셔닝을 이해하는 데 도움이되었습니다 (이 기사 이전에 나에게 미쳤던 것처럼 보임).

— JBrennan
소스

8

CSS 위치 지정을 사용하면 페이지에서 원하는 위치에 정확히 요소를 배치 할 수 있습니다.

CSS 위치 지정을 사용할 때 가장 먼저해야 할 일은 CSS 속성 위치를 사용하여 절대 위치 또는 상대 위치를 사용할 것인지 브라우저에 알리는 것입니다.

두 위치 모두 다른 기능을 가지고 있습니다. CSS에서 Position을 설정하면 top, right, bottom, left 속성을 사용할 수 있습니다.

절대 위치

절대 위치 요소는 정적 위치가 아닌 첫 번째 상위 요소를 기준으로 배치됩니다.

상대 위치

상대적으로 배치 된 요소는 정상적인 위치를 기준으로 배치됩니다.

요소를 상대적으로 배치하기 위해 속성 위치가 상대적으로 설정됩니다. 절대 위치와 상대 위치의 차이는 위치가 계산되는 방식입니다.

More : 위치 상대 vs 절대

— GowriShankar
소스

6

좋아요, 여기에 매우 분명한 대답 ... 기본적으로 상대적 위치는 이전 요소 또는 창에 상대적인 반면, 절대적으로 위쪽과 왼쪽을 사용하는 경우 부모가 아닌 한 다른 요소에 대해 신경 쓰지 마십시오.

차이점을 보여주기 위해 제가 만든 예제를보십시오.

또한 내가 만든 CSS를 사용하여 실제로 작동하는 것을 볼 수 있으며 절대 및 상대 위치가 어떻게 작동하는지 볼 수 있습니다.

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

스 니펫 확장

— 알리레자
소스

4

절대 위치는 디스플레이의 좌표를 기반으로합니다.

position:absolute;
top:0px;
left:0px;

^ 요소를 창의 왼쪽 위에 배치합니다.

상대 위치는 요소가 배치 된 위치를 기준으로합니다.

position:relative;
top:1px;
left:1px;

^ 요소를 원래 위치의 왼쪽에서 1px 아래로 1px 배치합니다. :)

— 데미안 라이트
소스

3

상대적인:

가있는 요소 position: relative;는 정상 위치를 기준으로 배치됩니다.
상대 요소에 위치 지정 속성 (위쪽, 왼쪽, 아래쪽 또는 오른쪽)을 추가하지 않으면 위치 지정에 전혀 영향을주지 않습니다. position: static요소 처럼 정확하게 작동합니다 .
그러나 다른 위치 속성 (예 : top : 10px;)을 추가하면 위치가 정상적으로있는 위치에서 10 픽셀 아래로 이동합니다.
이러한 유형의 위치 지정 요소는 다른 요소의 영향을 받고 자체적으로 다른 요소에도 영향을줍니다.

순수한:

요소를 position: absolute;사용하면 원하는 위치에 요소를 정확히 배치 할 수 있습니다. 위, 왼쪽, 아래 위치 지정 속성을 사용합니다. 위치를 설정할 권리가 있습니다.
가장 가까운 비 정적 조상을 기준으로 배치됩니다. 그러한 컨테이너가 없으면 페이지 자체를 기준으로 배치됩니다.
페이지의 정상적인 요소 흐름에서 제거됩니다.
이러한 유형의 위치 지정 요소는 다른 요소의 영향을받지 않으며 다른 요소의 흐름에도 영향을주지 않습니다.

더 명확한 설명을 위해이 설명이 포함 된 예제를 참조하십시오. https://codepen.io/nyctophiliac/pen/BJMqjX

— 프란 쉬 티 와리
소스

0

Absolute는 객체 (div, span 등)를 절대 강제 위치 (일반적으로 픽셀 단위로 결정)에 배치하고 상대는 객체가 일반적으로있는 위치에서 일정량 떨어진 곳에 배치합니다. 예를 들면 :

위치 : 상대; 왼쪽 : -20px;

텍스트가 화면 왼쪽 가장자리에서 20px 이내 인 경우 텍스트의 왼쪽이 사라질 수 있습니다.

— 찰스 징크
소스

0

position: absolute 0,0과 같이 어디에나 배치 할 수 있습니다.

position: relative 검색기에 원래 배치 된 위치에서 간격 띄우기 된 상태로 배치됩니다.

— Vil Ignoble
소스

0

위치 : 상대 부모 요소 역할을합니다. 위치 : 절대 상대 위치의 자식 역할을합니다. 아래 예를 볼 수 있습니다

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— 임란 칸
소스