상대적 위치 대 절대적 위치?

상대적 위치 대 절대적 위치?

사이의 차이점은 무엇입니까?position: relative그리고.position: absolute CSS로? ?그리고 언제 그것들을 사용해야 합니까?

절대 CSS 포지셔닝

position: absolute;

절대 위치 설정이 가장 이해하기 쉽습니다.은 CSS 신은로 CSS 합니다.position속성:

position: absolute;

이 메시지는 브라우저에 문서의 일반적인 흐름에서 위치를 변경하고 페이지의 정확한 위치에 배치해야 함을 알려줍니다.HTML에서 앞이나 뒤의 요소가 웹 페이지에 배치되는 방식에는 영향을 주지 않지만 재정의하지 않는 한 부모의 위치에 따라 달라집니다.

문서 창의 맨 위에서 요소 10픽셀을 배치하려면 다음을 사용합니다.top을 로쇄로 합니다.position에 로으끝것그와 함께 있습니다.absolute배치:

position: absolute;
top: 10px;

이 그면이요항표시니다됩상가를 표시합니다.10px어떤 내용이 요소(아래 또는 위)를 통과하는지에 관계없이 페이지의 맨 위에서 선택합니다.

네 가지 포지셔닝 특성은 다음과 같습니다.

1. top
2. right
3. bottom
4. left

이러한 특성을 사용하려면 오프셋 특성으로 간주해야 합니다. 즉, 위에 위치하는 입니다.right: 2px ㅠㅠㅠㅠㅠㅠㅠ2px에서 오프셋됩니다.2px다른 세 가지도 마찬가지입니다.

상대 포지셔닝

position: relative;

상대 위치 지정은 다음과 같은 4가지 위치 지정 특성을 사용합니다.absolute위치 결정그러나 브라우저 뷰 포트를 기준으로 요소의 위치를 지정하는 대신, 요소가 여전히 정상적인 흐름에 있는 경우 요소의 위치에서 시작합니다.

예를 들어, 웹 페이지에 세 개의 단락이 있고 세 번째 단락에 다음과 같은 내용이 있습니다.position: relative스타일이 배치되면 뷰포트의 원래 측면이 아닌 현재 위치에 따라 위치가 오프셋됩니다.

제1항

제2항.

Paragraph 3.

In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute;, anything following it would display on top of it, because it would no longer be in the normal flow of the document.

주의:

• 인 채무불행width으로 위치하는 요소와 달리 내용의 너비입니다.width이라100%채워질 수 있는 공간을 말입니다.

• 절대적으로 위치한 요소와 겹치는 요소를 가질 수 있지만, 상대적으로 위치한 요소에서는 이 작업을 수행할 수 없습니다(즉, 음의 여백/위치 지정을 사용하지 않는 경우).

---

끌어온 로트: 이 리소스

"상대적" 위치와 "절대적" 위치는 모두 서로 다른 틀을 가지고 있습니다."절대" 위치는 다른 둘러싸는 요소의 위치에 상대적입니다."상대적" 위치 지정은 위치 지정 없이 요소 자체가 갖는 위치에 상대적입니다.

그것은 당신이 어떤 것을 사용하느냐에 따라 당신의 필요와 목표에 달려 있습니다."상대" 위치는 요소의 흐름에서 요소를 다른 위치로 이동하려는 경우에 적합합니다. 예를 들어 일부 문자를 대문자 위치로 표시합니다."절대" 위치 지정은 다른 요소에 의해 설정된 좌표 시스템에 요소를 배치하는 데 적합합니다(예: 일부 텍스트로 이미지를 "오버프린트"하는 경우).

경우," 위치설정(단, "상대적" 위치설정합니다.position: relative요소를 참조 프레임으로 만들기 위해 요소 내부에 있는 요소에 대해 "절대" 위치 지정을 사용할 수 있습니다(마크업).

또한 절대 요소를 상위 요소로 제한하려면 상위 요소의 위치를 상대적으로 설정해야 합니다.그러면 하위 요소가 상위 요소 내에 포함되어 있고 전체 창과 "상대적"이지 않습니다.

저는 다음과 같은 영향을 주는 간단한 예를 제공하는 블로그 게시물을 작성했습니다.

그것은 부모의 노란색 div의 바닥에 절대적으로 위치하는 녹색 div를 가지고 있습니다.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

상대 위치:

상대 위치를 지정한 경우, 상단 또는 하단을 사용하고 왼쪽 또는 오른쪽을 사용하여 문서에서 일반적으로 발생하는 위치에 상대적으로 요소를 이동할 수 있습니다.

절대 위치:

위치:absolute를 지정하면 요소가 문서에서 제거되고 사용자가 지정한 위치에 정확히 배치됩니다.

이것들은 http://www.barelyfitz.com/screencast/html-training/css/positioning/ 에서 가져온 것으로, 절대 및 상대 위치에 대한 두 위치의 샘플 사용입니다.

상대 : 현재 위치를 기준으로 하지만 이동할 수 있습니다.또는 상대적으로 위치한 요소가 자신에 대해 위치합니다.

Absolute : 절대 위치 요소는 가장 가까운 위치에 있는 부모 요소를 기준으로 배치됩니다. 요소가 있으면 창을 기준으로 고정된 것처럼 작동합니다.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

두 부모 여기, 두째부님모번.div 위치는 상대적입니다.div 부모에 위치가 변경됩니다.div첫 번째 부모인 경우div위치는 중부보다 상대적일 것입니다.div첫 번째 부모에 대한 위치가 변경될 것입니다.div세부사항

제 명성에 댓글을 달 수 있을 정도로 답변을 드립니다.그러나 이것을 답으로 보지 마십시오. 저는 바닥글과 위치 설정에 문제가 있었습니다.

페이지를 설정할 때 바닥글이 항상 맨 아래에 있고 절대 위치이며 주 컨테이너/래퍼는 상대 위치입니다.

그런 다음 텍스트 내용과 동일한 내용 내의 메뉴(헤더와 바닥글 사이의 페이지 흰색 부분)에서 문제가 발견되었습니다. 이 메뉴를 절대로 설정하면 바닥글이 더 이상 아래로 유지되지 않습니다.

위치 지정은 복잡한 주제를 말하는 것처럼 말입니다.

웹 페이지에서 '절대' 위치에 있고 옆으로 밀리지 않는 콘텐츠에 대한 제 해결책은 드롭다운 메뉴를 열 때 실제로 해당 콘텐츠에 상대적인 위치를 지정하고 드롭다운 메뉴 아래에 35em을 두는 것이었습니다. (35em은 완전히 확장되었을 때 드롭다운 메뉴의 높이입니다.)

그 다음, Top:-35em, 이전에 내용이 옆으로 밀렸습니다.그리고 마진-밑면을 더합니다: -35em.이렇게 하면 내용은 드롭다운 메뉴 아래에 있지만 시각적으로는 드롭다운 메뉴와 나란히 있습니다!바닥글 아래쪽의 흰색 공간은 10em 정도의 여유밖에 없습니다. 이것을 가지고 놀기 시작하기 전과 같습니다.그래서 이것에 대한 저의 해결책은 다음과 같았습니다.

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

질문에 대한 답변이 좋은 것 같습니다. 하지만 많은 문제를 겪은 후에 저는 이것이 매우 좋은 해결책이며 포지셔닝이 어떻게 작동하는지 더 잘 이해할 수 있는 방법이라는 것을 알게 되었습니다.텍스트 콘텐츠를 드롭다운 메뉴 아래에 배치하면 텍스트가 옆으로 밀리지 않습니다.텍스트를 절대 위치로 변경하면 바닥글이 제자리에 유지되지 않습니다.이것이 저보다 더 많은 사람들에게 문제가 된다는 것을 믿을 수 있기 때문에, 저는 여기에 이것을 추가합니다.실제로 일어난 일은 제가 드롭다운 아래에 35개의 문자를 넣었다는 것입니다.

그리고 나서, 저는 시각적으로 그것을 상대적인 위치와 함께 서로 바로 옆에 놓았습니다. 그리고 아래의 큰 공간을 저녁으로 여백:-35em;

부정적인 값은 때때로 과소평가됩니다. 이러한 위치를 더 잘 이해할 때 매우 좋은 기능을 제공합니다.

물론 고정 위치도 바닥글에는 논리적으로 보였지만, 텍스트나 내용이 뷰포트보다 길면 바닥글이 뷰포트 아래로 내려가길 원합니다.그리고 페이지에 내용이 적을 경우에는 맨 아래에 있어야 합니다.

이 설정은 그것을 매우 잘 수정했고, 더 유동적이고 역동적인 페이지 레이아웃을 위해 'px'가 아닌 '그들'을 사용하는 것을 기억하세요! :)

(더 나은 솔루션이 있을 수도 있지만 여러 플랫폼과 기기에 걸쳐 사용할 수 있습니다.

상대 대 절대:

• 차이점: 자신과 가장 가까운 위치에 있는 조상과 상대적인 차이입니다.
• 차이:그 주변의 다른 요소들은 그 오래된 존재를 존중하고, 그 주변의 다른 요소들은 그 오래된 존재를 존중하지 않습니다.
• 유사성:주변의 다른 요소들은 새로운 존재를 존중하지 않으며, 주변의 다른 요소들은 새로운 존재를 존중하지 않습니다.

절대 대 상대의 차이를 설명하는 시나리오를 논의해 보겠습니다.

본문 요소 내부에는 보기 높이의 95%인 95vh의 헤더 요소가 있다고 합니다.이 용기 안에 이미지를 넣고 불투명도를 0.5로 낮췄습니다.이제 왼쪽 상단 모서리에 로고 이미지를 배치하려고 합니다.저는 당신이 그 시나리오를 이해하기를 바랍니다.따라서 지정된 위치에서 머리글 섹션의 상단에 로고가 있는 밝은 이미지가 나타납니다.

하지만 이것을 시작하기 전에 마진과 패딩을 이렇게 0으로 설정했습니다.

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

이렇게 하면 요소에 기본 여백과 패딩이 적용되지 않습니다.

따라서 두 가지 방법으로 요구 사항을 달성할 수 있습니다.

퍼스트 웨이

• 당신은 로고라고 말하는 이미지에 수업을 줍니다.

• 당신이 쓰는 css로.

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• 이것은 머리글인 동봉된 부모의 상단과 왼쪽에서 40인치에 로고를 배치했습니다.이미지가 원하는 대로 배치된 것처럼 나타납니다.

하지만 친구여, 이것은 당신이 불필요하게 많은 공간을 사용한 이미지를 배치하는 나쁜 디자인입니다. 그것이 필요하지 않을 때 약간의 여유를 줌으로써 말이죠.이미지를 해당 위치에 배치하기만 하면 됩니다.당신은 그것을 주변의 여백으로 쿠션을 만들어서 관리했습니다.여백이 공간을 차지하고 콘텐츠를 더 깊이 밀어넣어 원하는 위치에 정확히 위치한다는 인상을 줍니다.당신이 이 문제를 이해하기를 바랍니다.원하는 위치에 이미지를 배치하는 데 필요한 공간보다 더 많은 공간을 차지하고 있습니다.

이제 다른 접근법을 시도해 보겠습니다.

제2의 길

• 로고 클래스가 있는 이미지가 say 헤더 클래스가 있는 헤더 요소 안에 있습니다.그래서 부모 클래스는 헤더이고 자식 클래스는 이전과 같이 로고는 로고입니다.

• 헤더 클래스의 위치 속성을 다음과 같이 상대적으로 설정합니다.

  .header{ position: relative; }

• 그런 다음 로고 클래스에 다음 속성을 추가했습니다.

  .logo{ position:absolute; top:40px; left:40px }

여기 있습니다.이미지를 정확히 같은 위치에 배치했습니다.첫 번째 접근법과 두 번째 접근법 사이에는 육안과 뚜렷한 위치 차이가 없습니다.그러나 이미지 요소를 검사하면 추가 공간이 필요하지 않습니다.그것은 자신의 너비와 높이만큼 정확히 같은 면적을 차지하고 있습니다.

그렇다면 어떻게 이것이 가능할까요?저는 이미지 로고 클래스에 당신이 이 클래스의 아이이기 때문에 헤더 클래스에 상대적으로 배치될 것이라고 말했고, 특히 그것의 위치를 상대적으로 언급했습니다.모든 어린이가 왼쪽 상단 모서리에 상대적으로 배치되도록 합니다.그리고 당신의 위치는 이 부모 요소 안에서 고정되어야 합니다.그래서 당신은 절대적으로 주어집니다.그리고 당신은 제가 원하는 위치로 위에서 왼쪽으로 조금 움직일 필요가 있습니다.따라서 40px를 값으로 하는 상단 및 왼쪽 속성이 제공됩니다.이렇게 하면 부모님에게만 상대적인 위치를 지정할 수 있습니다.내일 부모님을 위나 아래 또는 아무 곳이나 이동시키면 부모님 헤더의 왼쪽 상단 모서리와 왼쪽 상단 모서리에 항상 40px가 됩니다.따라서 여러분의 위치는 부모님의 위치가 미래에 고정되어 있든 없든 상관없이 부모님의 내부에 고정되어 있습니다(여러분처럼 절대적이지 않기 때문입니다).

따라서 부모와 자녀에 대해 각각 상대적, 절대적으로 사용합니다.두 번째로 하위 요소를 상위 요소 내의 특정 위치에만 배치하려는 경우 사용합니다.여백과 같은 필러를 사용하여 강제로 밀지 마십시오.부모 상대값과 이동할 자녀에게 절대값을 지정합니다.상위, 왼쪽 아래 또는 오른쪽 속성을 하위 클래스에 지정하여 원하는 위치에 상위 클래스를 배치합니다.

감사해요.

Absolute는 요소를 흐름 레이아웃에서 제외하고 가장 가까운 상대적 상위 항목에 배치합니다(기본적으로 모든 상위 항목은 정적임).그것이 대부분의 시간에 절대적인 것과 상대적인 것을 함께 사용하는 방법입니다.

친척을 단독으로 사용할 수도 있지만, 매우 드문 경우입니다.

저는 이것을 설명하기 위해 비디오를 만들었습니다.

https://www.youtube.com/watch?v=nGN5CohGVTI

• 정적: 기본값 / 효과 없음
• 상대: html 레이아웃에 위치한 일반 위치부터 적용됩니다.
• 절대: 상위 Div/Box에 대해 유효합니다.

아래 이미지는 명확한 아이디어를 제공합니다.

언급URL : https://stackoverflow.com/questions/10426497/position-relative-vs-absolute