CSS 단축키:위치

CSS Express란 무엇입니까?
나는 인스타그램에서 내가 사랑하는 커뮤니티에 "무슨 CSS 속성이 당신을 곤혹스럽게 합니까?"라고 묻기 시작했다.
CSS Express에서 CSS 등록 정보를 자세히 설명합니다.이것들은 지역사회가 요구하는 재산이다.만약 당신도 CSS 속성에 대해 곤혹스러우시다면 아래의 평론에서 저에게 편지를 써 주십시오!나는 모든 문제에 대답한다.
나는 twitch.tv에서 프로그래밍을 할 때도 생방송으로 방송한다.직접 나에게 말하고 싶다면!

얘기 좀 하자position아, CSS의 위치 요소.이것은 보통 CSS의 재미있는 부분이 아니지만, 우리는 반드시 이렇게 해야 한다.이것이 바로 오늘 우리가 position 부동산에 대해 토론해야 하는 이유다.

기본값: 정적
설정하든 안 하든 기본적으로 요소는 정적입니다.그래서 페이지의 정상적인 절차를 따른다.즉, HTML 요소가 HTML 파일에 표시되는 순서와 동일하게 표시됩니다.블록 요소는 같은 줄에 적합하다면 그 안에 자신의 새 줄과 내연 요소를 나타낼 것이다.
요소가 정적 으로 설정된 경우 top, bottom 및 left 속성이 작동하지 않습니다.

.box {
  position: static;
}

                                       static
                          +--------+ +--------+ +--------+
                          |        | |        | |        |
                          |        | |        | |        |
                          |        | |        | |        |
                          +--------+ +--------+ +--------+

상대적
상대 속성은 엔티티의 정적 위치를 기준으로 엔티티를 이동합니다.원소의 왼쪽 상단에 큰 붉은 점이 있다고 가정해 보세요.현재, 설정right과 top 속성을 설정할 때, 브라우저는 설정한 픽셀(또는%) 을 계산하고 그 값에 따라 요소를 이동합니다.설정left과bottom도 같은 상황이 발생하지만 지금은 빨간색 점이 오른쪽 아래에 있습니다.right승top과bottom승left승right공교롭게도 같은 원소에 이 두 원소를 설치했다면 그 중 하나만 사용해야 한다.top 또는 bottom 및 left 또는 right.relative를 사용하면 이 요소가 페이지 흐름에서 차지하는 원시 공간은 이 요소에 의해 점용됩니다.

.box{
  position: relative:
  top: 100px;
  left: 50px
}

                                      relative
                          +--------+ +--+       +--------+
                          |        |    |       |        |
                          |        |    |       |        |
                          |        |    |       |        |
                          +--------+    |       +--------+
                                        ↓
                                        +-------+
                                        |       |
                                        |       |
                                        +-------+

절대적
절대 위치와 상대 위치는 약간 같지만 다르다.다시 한 번 붉은 점을 상상해 보아라. 그러나 이번에는 원소가 있는 위치가 아니라 부모 원소가 있는 위치다.우리의 논리와 상대론은 같다.유일하게 변경된 것은 브라우저가 계산 요소를 어디에 두어야 하는지의 점이다.현재 이 원소가 차지하는 공간은 다른 원소도 자유롭게 차지할 수 있다.이 원소는 정상적인 절차를 넘어 공간을 차지하지 않는다는 얘기다.

.box {
  position: absolute
  top: 5px;
  left: 5px;
}

                                       absolute
                    parent↓
                   +-------------------------------------------------+
                   |                                                 |
                   | +--------+                                      |
                   | |        |                                      |
                   | |        |                                      |
                   | |        +<--------------+                      |
                   | +--------+  +---------+  | +---------+          |
                   |             |         |  | |         |          |
                   |             |         |  + |         |          |
                   |             |         |    |         |          |
                   |             +---------+    +---------+          |
                   |                                                 |
                   |                                                 |
                   |                                                 |
                   |                                                 |
                   +-------------------------------------------------+

고정했어
'복구' 는 브라우저 창의 일부분에 원소를 망치로 박는 것 같아서, 스크롤을 시도해도 그곳에 남을 것이다.그것은 항상 너의 스크린 위에 있다.네, 좀 더 정확하게 설명합시다.옛날에 빨간 점 기억나세요?현재, 이 빨간 점은 브라우저의 구석구석에 연결되어 있습니다.top: 0;와 left: 0;는 사이트 왼쪽 상단의 첫 번째 픽셀이 될 것이다.너는 bottom: 0;와 right: 0;가 무엇을 잘했는지 상상할 수 있니?fixed의 또 다른 기능은 원소를 굴리면 지정된 위치에 있고 z-index가 없으면 다른 원소의 맨 위에 있다는 것이다.

.box {
  position: fixed;
  right: 10px;
  top: 10px;
}

                                        fixed
       +---------------------------------------------------------------------------+                                 
       |webpage                                                                _ x |
       +---------------------------------------------------------------------------+
       |                                                             +----------+  |
       |    parent↓                    +---------------------------->+          |  |
       |    +-------------------------------------------------+      |          |  |
       |    |                          |                      |      |          |  |
       |    |                          |                      |      |          |  |
       |    |                          |                      |      +----------+  |
       |    |                          |                      |                    |
       |    |             +---------+  | +---------+          |                    |
       |    |             |         |  | |         |          |                    |
       |    |             |         |  + |         |          |                    |
       |    |             |         |    |         |          |                    |
       |    |             +---------+    +---------+          |                    |
       |    |                                                 |                    |
       |    |                                                 |                    |
       |    |                                                 |                    |
       |    |                                                 |                    |
       |    +-------------------------------------------------+                    |
       |                                                                           |
       |                                                                           |
       |                                                                           |
       |                                                                           |
       +---------------------------------------------------------------------------+

끈적끈적하다sticky는 비교적 새로운 포지셔닝 방법으로 브라우저가 지원하는 곳이 없다.나는 이렇게 하는 것을 권장하지 않는다. 만약 사용자가 낡은 브라우저를 사용하거나, 1% 이하의 브라우저를 사용한다는 것을 알고 있다면, 모바일 브라우저도 이런 포지셔닝 방법을 사용하기 어려울 것이다.그러나 점성은 어떻게 작동합니까?우선, 만약 네가 굴러가지 않는다면, 너의 점착 원소는 정적 원소로 지정될 것이다.당신의 두루마리가 마술로 변하면!끈적임 요소는 top 속성이 지정한 위치에 붙습니다!이것이 바로 점성 작업을 하기 위해 top 속성을 설정해야 하는 이유다.너는 붉은 점을 놓쳤지, 그렇지?빨간 점이 브라우저 창 뷰포트의 맨 위에 있고 그곳에서 당신의 페이지를 볼 수 있다고 상상해 보세요.따라서 top 를 0으로 설정하면, stick 요소는 브라우저의 맨 위에 붙여넣을 것입니다. 아무런 틈도 없습니다.이것은 점성 메뉴에 매우 유용하다.만약 디자인에 간극이 필요하다면 top 속성과 good to go에 픽셀 수를 추가하세요!또한 z-index가 없으면 점착 원소가 모든 다른 정적 원소보다 높다는 것을 기억하세요.또한, 아니오, 저는 이 때문에 ASCII 예술을 만들지 않았습니다. 왜냐하면 이것은 스크롤해서 설명해야 하기 때문입니다. 이것이 바로 제가 당신을 위해 이 아름다운 코드 펜을 실현한 이유입니다!스크롤만 하면 효과를 볼 수 있습니다!

.box {
  position: sticky;
  top: 0;
}

결론
오늘 우리는 브라우저에서 물건을 어떻게 포지셔닝하는지 배웠지만 position 당신이 무엇을 해야 하는지 알고 있어야 하는 상황에서만 사용해야 합니다!그 중 일부 계산은 브라우저에 있어서 매우 비쌀 수도 있다. 만약 추가 계산이 필요한 요소가 너무 많다면, 당신의 사이트는 늦어질 수도 있다.그러니까 먼저 생각하고 실행해!이 게임들을 하는 것은 매우 재미있다. 네가 그것들로 얼마나 미친 효과를 낼 수 있겠는가!그러나 여느 때와 마찬가지로 당신은 기본 지식을 이해해야 합니다!따라서 코드pen 예시를 마음대로 사용하십시오.
만약 네가 나를 도와 아래의 일을 할 수 있다면, 그것은 나에게 도움이 될 것이다.
가서 나에게 추종자를 남겨라!만약 단지 몇 사람만이 이렇게 할 수 있다면, 이것은 나에게 있어서 전 세계를 의미한다.❤❤❤😊
👋안녕하세요.Medium | |