css - float&position

css 헷갈렸던 부분 잘 짚고 넘어가보면 좋을것 같다.

자식들중에서 한 요소에게 float을 주면
부모는 그 float을 준 자식을 인식하지 못한다.

그리고 float을 준 자식은 block의 속성을 가지지만 자기 콘텐츠 만큼의 블록 성질을 갖는다. 기존의 block처럼 한 줄을 다 차지하지 않는다.

그리고 그 부모는 float을 준 자식을 찾지 못하고 height가 그 자식 나간만큼 줄어든다.

자식들이 다 float 된 부모한데 overflow-hidden 을 주면 자식들을 다 인식할 수 있다.

position

relative

• 자식요소에게 relative를 주어도 주변 자식들은 그 relative를 준 자식의 위치를 인지하고 있기 때문에 주변 형제들의 위치에 영향을 주지 않는다.
  그리고 그 relative를 준 요소에게는 top, left 로 위치를 조정해 줄 수 있다.
  주변형제들은 영향을 받지 않는다.

absolute

• 요소에게 absolute를 주면 block이 된다. 단 자신의 content크기만큼 block성질을 갖는다. 자식에게 absolute를 주면 float처럼 부모는 자식을 인지 못한다.
  자식이 absolute면 그 부모가 static이 아닌 요소(relative...)를 기준으로 움직인다(left, right,top,bottom로)

fixed

• 브라우저 창 전체를 기준(viewport) 으로 위치가 되면 항상 고정됨.
  단 , left- right -top -bottom 으로 위치를 조정해 주되, left-right 둘중하나 top-bottom 둘중 하나만 쓰자

• right&bottom

• left&top