상대 위치 대 절대 ​​위치

상대 위치 대 절대 ​​위치

---

차이 무엇 position: relative과 position: absoluteCSS의는? 그리고 언제 사용해야합니까?

---

절대 CSS 포지셔닝

position: absolute;

절대 위치 지정이 가장 이해하기 쉽습니다. 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;

상대 위치 지정은 위치 지정과 동일한 네 가지 위치 지정 속성을 사용합니다 absolute. 그러나 브라우저보기 포트에서 요소의 위치를 ​​기반으로하는 대신 요소가 여전히 정상적인 흐름 에있는 경우 요소의 위치에서 시작합니다 .

예를 들어, 웹 페이지에 세 개의 단락이 있고 세 번째 단락에 position: relative스타일 이있는 경우 위치는 뷰 포트의 원래면이 아닌 현재 위치를 기준으로 오프셋됩니다.

단락 1.

단락 2.

단락 3.

위의 예에서 세 번째 단락은 3em컨테이너 요소의 왼쪽에서 배치되지만 여전히 첫 두 단락 아래에 있습니다. 문서의 정상적인 흐름을 유지하고 약간 오프셋됩니다. 로 변경 position: absolute;하면 문서의 일반적인 흐름에 더 이상 포함되지 않으므로 그 뒤의 모든 항목이 맨 위에 표시됩니다.

노트:

• 기본 width절대적 위치 요소의 그것의 디폴트 위치를 상대적으로 위치되는 요소와는 달리, 그 안의 내용물의 폭 width이다 100%그것을 채울 수있는 공간.

• 절대적으로 배치 된 요소와 겹치는 요소를 가질 수 있지만 상대적으로 배치 된 요소 (예 : 음수 여백 / 포지셔닝을 사용하지 않음)로는이를 수행 할 수 없습니다.

---

뽑아 낸 많은 것 : 이 자원

---

“상대적”및“절대적”포지셔닝은 서로 다른 프레임 워크와 함께 실제로 상대적입니다. "절대"위치는 다른 둘러싸는 요소의 위치와 관련이 있습니다. "상대적"위치는 요소 자체가 위치를 지정하지 않은 위치에 상대적입니다.

그것은 당신의 요구와 당신이 사용하는 목표에 달려 있습니다. "상대적"위치는 요소의 흐름에있을 수있는 위치에서 요소를 대체하려는 경우에 적합합니다 (예 : 일부 문자를 위첨자 위치에 표시). "절대"위치 지정은 다른 요소에 의해 설정된 일부 좌표계에 요소를 배치하는 데 적합합니다 (예 : 일부 텍스트가있는 이미지를 "인쇄").

특별하게, 변위가없는 "상대"위치 설정 (설정 만 position: relative)을 사용하여 요소를 참조 프레임으로 만들면 요소 내부에있는 요소에 대해 "절대"위치 지정을 사용할 수 있습니다 (마크 업).

---

주의해야 할 또 다른 사항은 절대 요소를 부모 요소로 제한하려면 부모 요소의 위치를 ​​상대로 설정해야한다는 것입니다. 이렇게하면 자식 요소가 부모 요소에 포함되어 전체 창에 대해 "상대적"이 아닙니다.

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

그것은 녹색의 div를 가지고 있으며 그것은 절대적으로 노란색의 div의 바닥에 위치합니다.

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

---

상대 위치 :

position : relative를 지정하면 위쪽 또는 아래쪽, 왼쪽 또는 오른쪽을 사용하여 문서에서 일반적으로 발생하는 위치를 기준으로 요소를 이동할 수 있습니다.

절대 위치 :

position : absolute를 지정하면 요소가 문서에서 제거되고 지시 한 위치에 정확하게 배치됩니다.

다음은 절대 및 상대 위치에 따른 두 위치의 샘플 사용법에 대한 http://www.barelyfitz.com/screencast/html-training/css/positioning/ 튜토리얼 입니다.

---

상대 : 현재 위치와 관련이 있지만 이동할 수 있습니다. 또는 상대 위치 요소가 ITSELF를 기준으로 배치됩니다.

절대 : 절대 위치 요소는 IT의 가장 가까운 위치에 상대적인 위치에 배치됩니다. 하나가 존재하면 창과 관련하여 fixed .....처럼 작동합니다.

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

Here, 2nd parent div position is relative so the middle div will changes it's position with respect to 2nd parent div. If 1st parent div position would relative then the Middle div would changes it's position with respect to 1st parent div. Details

---

Putting an answer , as my reputation aint enough to comment. But dont look at this as an answer, just a additional info, as myself, had some problems with both footer, and positioning.

When setting up the page, so that my footer always stays at the bottom, with position absolute, and main container/wrapper with relative position.

I then found some issues with my text content, and a menu inside the same content(white part of page between header and footer), when setting these to absolute, footer no longer stays down.

Postitioning is, as you say a complex theme.

My solution, to the content I wanted in 'absolute' positon in my webpage, and not be pushed to the side, when in example opening a drop down menu, was to actually give it postition relative, and putting it 35em below my drop down menu. (35em is the heigth of my dropdown menu, when fully extended)

Then, Top:-35em, for the content that before was pushed to the side. And then adding margin-bottom:-35em. This way, the content is "below" my drop down menu, but visually it is side by side with my drop down menu! And the white space below down to the footer, is with only 10em margin, as it was before starting to play around with this. So my solution to this was like this :

 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;
}

I see your question is answered good, but after alot of troubleing I found this to be a very good solution, and a way to understand better how positioning works.. When I place my text content, below my drop down menu, it doesn't push my text to the side. If I changed the text to position absolute, the footer did not stay in place. As I can believe this is an issue for more people then me, I add this here. What in fact happends, is I put the text, 35ems, below my drop down.

Then, I visually put it right next to eachother, with relative position, and top:-35em;, and evening out the huge space below, with margin:-35em;

negative values are underestimated at times, very good functionality, when one understands these positions better!

Natually, fixed position, also seemed logic for my footer, but I do really want the footer to go below the viewport, if the text, or content, is longer than the viewport. And to stay at the bottom, if there is little content on the page.

This setupp fixed that very nicely, and remember to use 'em', not 'px' for a more fluid/dynamic page layout! :)

(there may be better solutions, but this works for me cross platforms, as well as devices).

---

Let's discuss a scenario to explain the difference between absolute vs relative.

Inside the body element say you have an header element whose height is 95% of viewheight i.e 95vh. Within this container you placed an image and reduced it's opacity to say 0.5. And now you want to place a logo image near the top left corner. I hope you understood the scenario. So you will have a lighter image in the header section with a logo on the top of it at the specified position.

But before starting this, i have set margin and padding to 0 like this

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

This ensures no default margins and padding is applied to elements.

So you can achieve your requirement in two ways.

First Way

• you give a class to the image say logo.

• in css you write

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

• this placed the logo to the 40px from the top and left of the enclosing parent which is the header. The image will appear as if it placed as desired.

But my friend this is a bad design as to place an image you unnecessarily consumed so much of space around by giving it some margin when it was not required. All you needed is to place the image to that location. You managed it by cushioning it with margins around. The margin took space and pushed it's content deeper giving an impression that it is positioned exactly where you wanted. Hope you understood the issue by working it around like this. You are taking more space than required to place just an image at the desired location.

Now let's try a different approach.

Second Way

• the image with logo class is inside the header element with say header class. So the parent class is header and the child class is logo as before.

• you set the position property of the header class to relative like this

  .header{ position: relative; }

• then you added the following properties to the logo class

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

There you go. You placed the image at exactly the same place. There won't be any apparent difference in the positioning from the naked eye between the first approach and second approach. But if you inspect the image element , you will find that it has not taken any extra space. It's occupying exactly the same area as much as it's own width and height.

So how is this possible? I said to the image logo class that you will be placed relative to the header class as you are the child of this class and that i specifically mentioned it's position as relative. So that any child of it's will be placed relative to it's top left corner. And that Your position need to be fixed inside this parent element. so you are given absolute. And That you need to move a little from top and left to the position i want you to be. Hence you are given top and left property with 40px as value. In this way you will be placed relative to your parent only. So if tomorrow i move your parent up or down or just anywhere, you will always be 40px to the top and left of your parent header's top left corner. So your position is fixed inside your parent no matter whether your parent's position is fixed or not in future(as it is not absolute like you).

So use relative and absolute for parent and child respectively. Secondly use it when you want to only place the child element at some location inside it's parent element. Do not use fillers like margins to push it forcibly. Give parent relative value and child which you want to move, the absolute value. Specify top, left bottom or right property to child class to place it inside parent anywhere you want.

Thanks.

---

Relative vs Absolute:

• Difference: relative to itself, relative to the nearest positioned ancestor.
• Difference: Other elements arounds it honour its old existence, Other elements around it DO NOT honour its old existence.
• Similarity: Other elements arounds it DO NOT honour its new existence, Other elements around it DO NOT honour its new existence.

---

마르코 펠 리치 오타 (Marco Pellicciotta) : 다른 요소 내부의 요소 위치는 내부 요소에 대해 상대적이거나 절대적 일 수 있습니다.

브라우저 창 관점에서 요소를 배치해야하는 경우 position : fixed를 사용하는 것이 가장 좋습니다.

참고 URL : https://stackoverflow.com/questions/10426497/position-relative-vs-absolute