야후 사용자 인터페이스 블로그 (YUIBlog)

CSS의 Position 속성

년 | 7시 35분에서 2010년 12월 14일 티에리 Koblentz하여 오전 CSS를 101 , 설계 , 개발 | 6 개의 댓글

이 속성은 모든 요소에 적용됩니다. 그것은 다섯 가지 값이있다 :

• static
• relative
• absolute
• fixed
• inherit

위치 : 정적

섹션 9 비주얼 서식 모델 :

상자에 따라 뻗어 정상 상자는 정상적인 흐름 . top , right , bottom 및 left 속성은 적용되지 않습니다.

것들에서 발견하는 이 데모

• 두 번째 상자는 위치를 선언하지 않고 될 정확히 어디에 보여줍니다.
• 주어진 값은 top '정적'컨텍스트의 계산된 값 때문에 적용되지 않습니다 박스 오프셋은 항상 auto .

기억해야 할 것들

• 있다면 position 요소의 속성의 값을 가지고 static 그 요소가 위치한다라고하지 않습니다.
• 때문에 static 초기 값 (기본값)이고, 그것이 다른 값을 덮어 제외 선언 블록에 같은 스타일을 포함시킬 필요가 없습니다.

위치 : 상대

섹션 9 비주얼 서식 모델 :

상자의 위치는 정상 흐름 (이것의 위치라고 부릅니다에 따라 계산됩니다 정상적인 흐름 ). 그러면 상자가 정상적인 위치에 상대적인 오프셋합니다. B는 상쇄되지 않은 것처럼 상자 B는 상대적으로 위치가되면 다음과 같은 상자의 위치를​​ 계산됩니다.

것들에서 발견하는 이 데모

• 박스 '두 사람'300 픽셀에 의해 아래로 이동했습니다,하지만 상자 '세'뿐만 아니라 다음과 같은 단락이 곳에 머물렀습니다. 상자 뒤에 그 발자국을 남겨 페이지에서 해제 될때처럼 나타납니다. 위치가 상대적으로 상자를 offsetting 것은 흐름을 방해하지 않기 때문입니다.
• 위치가 상대적으로 상자 중복 다음 요소. 그것은 다른 상자 앞에 표시됩니다.

기억해야 할 것들

• 계산된 값은 항상 = - = 하단 오른쪽과 왼쪽 상단합니다. 면 direction 포함하는 블록입니다 ltr '왼쪽'WINS와 '권리'의 가치가된다 - '왼쪽'. 면 direction 포함하는 블록은 rtl , '오른쪽'성과와 '왼쪽'는 무시됩니다. 저자는 반대의 속성에 동일한 값을 설정하여 사물이 작동하는 방법을 활용할 수 있습니다.
• '절대적인'모델과 달리 top , right , bottom 및 left 속성 스트레칭도 (그들은 그 크기를 변경할 수 없다) 상자를 축소 수 없습니다.

위치 : 절대

섹션 9 비주얼 서식 모델 :

상자의 위치 (및 크기)로 지정되어 top , right , bottom 및 left 속성. 이러한 속성은 상자의에 대하여 오프셋을 지정 포함하는 블록 . 절대적 위치 상자는 완전히 정상 흐름 (이것은 나중에 형제 자매에 아무런 영향을 미치지 않습니다)에서 제거하고 포함하는 블록과 관련한 입장을 할당됩니다. 또한,하지만 절대적 위치 상자 여백을 가지고, 그들은하지 축소 다른 여백과 함께.

것들에서 발견하는 이 데모

• 오프셋 어떤 상자를 지정하지 않기 때문에 박스 '두 사람은'원래 위치에서 이동하지 못했지만, 우리가 사용했다면 top:0;left:0; 예를 들어, 해당 상자에있을 것이 뷰포트의의 왼쪽 상단 모서리 .
• 레이아웃 지혜, 그건 상자 '두 사람이 함께 스타일되었던 같다 display:none . 상자 흐름에서 제거되었습니다.
• 흐름 박스 '두 사람 밖으로 상자'셋 '상자'하나의 '(문단이 따라했습니다)에 반대하는 이동되었습니다.
• 흐름에서 제거 모든 요소와 마찬가지로 박스 '두 사람은 수평으로 돌았습니다.

기억해야 할 것들

• 어떤 '절대'또는 '고정'위치에 요소의 계산된 값이 display 는 block .
• 어떤 '절대'또는 '고정'위치에 요소의 계산된 값을 float 없다 none .
• '포함하는 블록'위치 컨텍스트를 수립 박스입니다. 이는들과 가장 가까운 조상에 의해 설립되는 '위치' , '절대', '상대적'또는 '고정'의. 이것은 부모 상자가 포함하는 블록되지 않을 수 있습니다 의미 .
• 그것이 최고로 스타일되었다 것처럼 절대적 위치 상자의 기본 위치가 항상 동일하지 않습니다 : 0; 왼쪽 : 0, (LTR 컨텍스트에서). 그리고 이것은 두 가지 이유이다 :
  1. 위치 상자에 들어있는 블록은 가장 가까운 위치에 조상에 의해 설립되어, 아무도 없다면, 참조 컨테이너는 루트 요소입니다. 있는가 포함된 블록 루트 요소 삶을 사각형이다는 초기 포함하는 블록을했다. 연속 매체 들어,의 크기가 뷰포트의을 (화면 창 또는 다른보기 영역)와 캔버스 기원에 정박하고 있습니다. 이 예제는 뷰포트 관련 위치 상자 (기본가 포함된 블록)를 보여줍니다.
  2. 요소는 여백 상자 컨텐츠 박스가 아니하거나 포함하는 블록의 경계 상자에 대한 참조에 위치하고 있습니다. 이 새로운 예제는 패딩 상자의 가장자리 콘텐츠 상자의 가장자리를 (포함하는 블록이되는 만지지 않았 으면 박스 '두 사람'될 곳을 보여줍 body ).
• 상자의 크기는 결과가 될 수 있습니다 top , right , bottom 및 left 속성 값을. 예로 들어, 모든 속성을 따르면 것은 자사 포함된 블록의 패딩 상자의 크기에 맞게 상자 스트레치을 다할 것입니다. 참고 모든 박스 오프셋을 따르면 (IE6이 상자를 늘릴하지 않습니다.)
• 문서 (에서와 함께 스크롤되지 않습니다 마스크 오버레이를 만들려면 이전 예제 ) 중 하나를 사용 fixed 대신 absolute 또는 스타일 body 와 함께 position:relative 초기 위치 결정 블록 (스타일링 뷰포트이기 때문에 html IE에서 작동하지 않을 것이다) . 본 바와 같이 중첩 데모 보여줍니다.
• position:absolute 트리거의 haslayout .

기억해야 할 가장 중요한 것은

이 위치 결정 방식이 흐름에서 박스를 제거하기 때문에, 그것은 레이아웃을 위해 사용하는 것은 좋지 공법을 간주됩니다.

위치 : 고정

섹션 9 비주얼 서식 모델 :

고정 위치가 절대 위치의 하위 범주입니다. 유일한 차이점은 고정된 위치 상자, 포함된 블록에 의해 설립되어있다는 것입니다 뷰포트의 . 내용은 연속 미디어 문서를 스크롤하는 경우, 고정 상자는 이동하지 않습니다. 이러한 측면에서 그들과 유사한 고정된 배경 이미지 . 내용 페이지된 미디어 (여기서 문서의 내용이 하나 이상의 개별 페이지로 나뉩니다), 고정 위치에있는 상자는 각 페이지마다 반복됩니다. 이것은 각 페이지의 하단에 서명 예를 들어, 배치를 위해 유용하다. 페이지 영역보다 큰 고정된 위치에있는 상자가 잘렸습니다됩니다. 초기 포함된 블록에서 보이지 않는 고정 위치 상자의 부품이 인쇄되지 않습니다.

에서 알 수있는 것들 이 데모 :

• 고정 위치가 절대 위치의 하위 범주를위한 사실 모든것은 '절대'는 (요소 - 붕대를 축소, 그것 흐름 등에서 제거됩니다) '고정'에도 마찬가지입니다. 때문에
• 상자가 뷰포트 관련하여 배치됩니다, 그것은 페이지와 스크롤되지 않습니다.
• IE 6에서는 상자가 나타납니다 정적 상자로 하지만, "재미있는"가 있습니다 해결 방법은 그것에 있습니다.
• 문서를 인쇄할 때, 상자의 '두 사람은'모든 단일 페이지에 나타납니다.

기억해야 할 것들 :

• 상자의 위치는 '절대적인'모델에 따라 계산되지만, 이외에, 상자가되어 고정되어 어떤 기준에 대하여. 핸드헬드, 투영, 스크린, TTY, 및 TV 미디어 타입의 경우 상자에 대하여 고정되어 뷰포트 및 스크롤시 이동하지 않습니다.
• 박스의 일부 뷰포트의 영역의 밖에있다면 콘텐츠 시력 사용자에게 inaccessile 수 있습니다.
• 인쇄 미디어 유형의 경우, 저자는 각 인쇄된 페이지에 나타나지 않도록 요소를 방지할 수 있습니다. 지도에서와 같이 @ 미디어 규칙을 사용하여

    미디어 인쇄 {@ 
     # 로고 {위치 : 정적;}
   } 

• 마찬가지로 position:absolute , position:fixed 트리거됩니다 haslayout IE에서합니다.

위치 : 상속

경우 position:inherit 주어진 상자에 지정된 다음 그것은 상자의 부모에 대한 속성과 같은 계산된 값을 취할 것입니다.

IE 6과 7은 함께 사용할 때를 제외하고이 키워드를 지원하지 않습니다 direction 및 visibility (표시 의 CSS 속성 값 상속 ).

고려해야 할 것들

박스 오프셋

절대적 및 고정 위치 상자에 대해 가치가에 대한 비율로 설정하는 것이 인식 top , right , bottom 및 left 포함된 블록 (부모 상자 아닐 수도 있음)의 크기에 따라 계산됩니다.

'위치'와 '오버플로'

함께 스타일 상자 overflow:hidden 상대적으로 위치가 지정된 요소 (중첩된 박스)를 고정되지만 항상 절대적 위치에 사람을 숨길 수 없습니다. 부모 상자가 항상 포함하는 블록 (있는 가장 가까운 조상되지 않기 때문입니다 '순위' '상대적인'또는 '고정', '절대'의).

즉, 이것은 절대적으로 위치가 지정된 요소는 오버플로 스타일 상자 밖에서 나타납니다 의미 : 자신 포함된 블록 상자 자체 혹은 말했다 상자 안에 요소가있는 경우를 제외 숨겨져. 이 데모 페이지는 사물이 작동하는 방법을 보여줍니다.

여백

저자에 관계없이 자신의 위치 결정 체계의 요소에 여백을 사용할 수 있습니다.

IE의 경우

IE에서 상자 '를 배치한 것은'축복이나 저주가있을 수 있습니다 :

• IE6에서는 position:relative (with haslayout) 에서 마이너스 마진으로 스타일 상자를 예방하는 데 사용될 수 있습니다 잘린되고 (어떻게 볼 부모 컨테이너에 의해를 상자 포지셔닝 이 문제를 해결합니다.)
• 이 새로운 스태킹 컨텍스트를 (볼 확립 수 있으므로 요소를 배치한 것은 IE 6 및 7에서 길을 상자 스택을 "방해"수 테스트 케이스를 ).

주문을 스태킹하고 수준을 스태킹

• 소스 코드의 순서에 따라 위치 상자는 정상 흐름에서 수레와 상자 앞에 와서.
• 저자는 위치 상자에서 'Z - 지수'속성을 통해 스택 수준을 지정할 수 있습니다.
• IE6, 7에서 상자를 배치한의 단순한 사실은 스태킹 컨텍스트를 (위 참조, "설정할 수 IE의 경우 ").

모바일 디바이스

PPK의 기사 읽기 [여섯째] 위치 값을 모바일 브라우저 업체가 실제로 지원할 수없는 이유를 찾기 위해, position:fixed .

또한 판독

• 비주얼 서식 모델
• 위치 CSS (재산)
• 위치 선언

DrLangbhani 의한 "유령"비유 :

위치 상대가있는 요소는 항상 흐름이 그것의 정상적인 위치에 상대적인 오프셋합니다. 즉, 그것은 그것이 정상적인 상황에서 안 어디에 상대적으로 이동하고 있으며, 그것을 이동하면 주변 요소의 레이아웃에 영향을주지 않습니다. 그것은 뒤에 그 시체를 남겨두고있다 유령 같아요. 너비와 높이를 가지고 있으며, 신체는 주변 환경에 영향을 미치는지만, 보이지 않는 것입니다. 유령 상자가 움직일 수 있지만 그 위치는 여전히 그것으로부터 측정됩니다 점에서 아직도 옛날 신체에 연결되어 있습니다. 현재 위치 절대적있는 요소도 쉽습니다. 그것은 더 이상 모든 (그것이 레이아웃의 흐름에서 빼낸 것)에서 자사의 환경 영향을 미치지 않습니다. 이제 남겨진없이 몸을 가진 진정한 유령이다. 그것이 더 이상 존재하지 않는 것처럼 아득히의 형제 요소에 대해서라면 그것입니다. 상대, [위치 : 고정,] 또는 위치 : 절대 당신이 어느 위치에 하나를 찾을 때까지 그 지위를 얻으려면 상위 요소의 각각을 통해 봐. 그 요소는 참조 점이 될 것입니다. 당신이 "위치"요소를 찾지 못한 경우에만 그것은 문서에서 오프셋됩니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!