는 내가 가진 :위치 지정 및 플로팅에 문제가 있습니까?
.event {
float:left;
position:relative;
top: 50px;
width: 100%;
height: 100px;
background-color: #FFFFFF;
border-top: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
}
그것은 파이어 폭스 & 사파리에 내 원하는대로 작동합니다. 주로 다른 요소에 대해 부딪치지 만 반대쪽으로는 옵셋됩니다. 저는 float에 margin-top : 50px를 사용할 수 있다는 것을 알고 있습니다. 그러나 어떤 이유로 든 top은 나에게 더 의미가 있습니다.
감사합니다. Matt Mueller
플로팅 된 div에 position : absolute를 사용하는 요소가 포함되어 있기 때문에 때로는 float : left 및 position : relative가 필요하다는 것을 알게되었습니다.
"position : relative"는 자식 요소가 자신의 div 내에 올바르게 배치되었는지 확인합니다. 그들의 친척에 "친척"이 없다면 그들은 외부에 배치 될 것입니다.
이 포함 된 경우 요소가 포함 된 위치를 지정해야합니다 (상대 또는 절대). 그렇지 않으면 항상 원하는 결과를 얻지 못할 수 있습니다. 그 질문에 대답합니까?
처음에는 가능한 경우 수레와 상대/절대 위치 지정을 결합하지 않으려 고합니다. 복잡성이 증가하고 브라우저 간 문제가 발생할 가능성이 높아졌습니다.
두 번째로 float에 position: relative에 대한 유효한 사용 사례가 있습니다. 가장 명백한 것은 relative+absolute positioning (여기서 float의 내부 요소는 컨테이너에 대해 절대적으로 위치 함)을 사용하는 것입니다.
그건 당신이하고있는 것처럼 보이지 않으므로 margin-top을 사용하는 것이 좋습니다. 그런 식으로 두통이 덜해질 것입니다. 즉, 나는 심지어 top: 50이 당신이 여기서 기대하는 것을 할 지 확신하지 못한다.
좋은 답변입니다! 많이 도와 줬어! – weekens
아무 문제가 없습니다. float은 요소가 렌더링되는 흐름을 나타냅니다. position은이 요소가 오프셋 된 앵커 요소를 나타냅니다. 이들이 상호 배타적 인 경우 W3C 권장 사항은 가능한 옵션을 단일 속성으로 롤백했을 것입니다.
margin:50px 0 0;를 사용해야합니다
this
에 있기 때문에
나쁜 아이디어 나중에 제대로 오는 요소. 명시 적으로 width:100%을 설정할 필요가 없습니다.
너는 그가 너비 : 100 %를 설정할 필요가 없다는 것을 어떻게 알 수 있니? .event 엘리먼트를 떠 다니기 때문에 명시 적으로 설정하지 않으면 폭이 내용의 너비로 줄어들 것입니다. –
100 % 너비의 플로팅 요소를 보는 것은 드문 일이지만 실제 페이지를 보는 데 도움이 될지 모르지만 당신이 옳다고 생각합니다. –
당신이 해낸 방식에 "잘못된"것은 없습니다. 많은 경우에, 그것을 "옳은"방법으로 간주 할 수 있습니다.
이렇게 말하면 position: relative; top: 50px;에 대한 의미는 더 많거나 적습니다. margin-top: 50px;보다 의미가 없습니다. 두 가지 방법 모두 편안하게 사용하는 것이 좋으며이 경우 마진을 사용하고 일반적인 방법으로 첫 번째 방법을 사용하는 것이 좋습니다.
상대적 위치 지정은 요소가 서로 관련하여 흐르게하는 방법을 망칩니다. 나중에 다른 요소를 왼쪽으로 띄우고 .event 요소 아래에 쌓아두기로 결정한 경우 .event이 새 요소의 상위 50 픽셀과 겹치는 것을 확인할 수 있습니다. 상대 위치 지정으로 요소를 옵셋 할 때 해당 상자는 배치에 남아 있으며 은 위치 지정없이을 렌더링하므로 인접 요소와 이상하게 상호 작용합니다.
position : absolute에 대해 사실 (허위 브라우저 제외)이지만 position : relative로 요소를 이동하면 부모의 위치 지정 유형에 관계없이 신뢰할 수 있습니다. –