CSS의 top 및 left

CSS를 작성할 때 항상 위치를 설정하면 top left를 사용할 것입니다. 물론 두 개의 right와bottom도 있습니다.자주 사용하는 사람들은 이 두 속성이 매우 간단하다고 생각할 것이다. 말할 필요가 없지만, 나는 그래도 나의 소감을 말한다.
top 및 left 정보
이 네 가지 속성은 특정 용기에 대한 편이도를 설정하는 것이다.top는 원소의 맨 윗부분이 용기의 맨 윗부분과 상대적인 편이를 가리키며,right는 원소의 오른쪽이 용기의 오른쪽에 비해 싸지만 방향은 오른쪽에서 왼쪽이다.방향이 있기 때문에 이 네 가지 속성도 마이너스 값으로 설정할 수 있고 반대 방향으로 편이할 수 있다.백분율을 설정할 수도 있습니다. 이 값은 용기에 비해 계산된 것입니다. 예를 들어 top:50%, 즉 용기의width*50%입니다.
포지션과의 관계
이 네 가지 속성은position과 함께 사용해야 합니다. 그렇지 않으면 효과가 없습니다.position 값이static일 때 이 네 가지 속성도 무효입니다.position에는 또 다른 세 가지 값인 absolute,relative,fixed,fixed와 absolute가 유사하기 때문에 가장 큰 차이점은 absolute와relative이다.absolute는 루트 용기에 대한 편이이고,relative는 부모 용기에 대한 편이입니다.
카트리지 모델과의 관계
CSS에서 박스 모델을 정의했는데 이 인터넷에 많은 글이 있습니다.주로 Margin (바깥쪽 거리),border (테두리),padding (안쪽 거리) 이라는 세 가지 명사가 있는데, 이 상자의 빈틈을 설정하는 데 쓰인다.W3C가 정의한 박스 모델 정의의width와height는 내용 실체를 가리키며margin,border와padding을 포함하지 않는다. 전통적인 박스 모델은 다르다. 그의width는border와padding을 포함하는데 아래 그림을 보면 이해를 돕는다.
그러나 다행히도 IE는quirksmode에서만 전통적인 모델을 사용하고 나머지는 W3C의 모델을 사용한다.그런데 이 두 가지 모형이 두 가지가 좋을까요?ppk가 말했듯이,
마음대로 진정한 상자를 가지고 상자보다 작은 물건을 넣으세요.누구에게도 이 상자의 너비(width)를 물어보면, 그는 상자의 바깥쪽부터 재기 시작하는데, 아무도 안에 있는 물건을 재러 돌아가지 않는다.
그의 이런 견해에 따르면 전통적인 박스 모형은 사람의 느낌에 더욱 가깝다.그러나 개발자에게 W3C는 더 좋은 판단을 하기 때문에 나는 내용의 크기가 테두리와 내부 간격에 따라 변화하고 싶지 않다.
이렇게 박스 모형을 많이 말했는데 탑과left는 무슨 상관이야?그러면 이 네 가지 속성이 말하는 원소의 가장자리는margin,border,padding이라고 생각합니까?W3C모델은 편이값은 용기의 내용 실체가 원소의 바깥쪽 거리까지의 거리를 가리킨다. topleft가 정의한 상자의 왼쪽 상단의 좌표는margin-top과margin-left의 교점이다. 물론 이 좌표는 용기에 비해 전통적인 모델도 마찬가지다.
뒤돌아보니 엉망진창으로 썼고 편제가 좀 있었어요. 아마 topleft는 정말 할 말이 없었을 거예요.

position：absolute； //      ，top left     
top: 10px;  //    10  ，       10  
left: 10px; //  ，   

absolute       

           relative ,