[css] position layout

 

#header{ width: 1000px; height: 100px;
   	border: 2px solid gray;
    	 margin: 20px auto;
         }

---

.nyang_img_left{
    position: absolute; left: 6px; top: 6px;
    /* header의 자식에서 벗어나 이미지가 따로 떨어져서 header기준 (6,6)이동하게 됨 */
}

position :  absolute; 를 지정해주면

공중에 붕뜬 상태에서 브라우저를 기준으로(6,6)지점으로 바뀌게 된다.

이 상태에선 기존 부모였던 header에서 벗어나 body를 부모로 갖게됨(마치 부모가 없어진것처럼)

 #header{ position: relative; }
/* absolute속성을 가진 자식을 내 자식으로 인지하도록 하는 코드!! */

이미지를 가진태그의 부모태그인 #header 에 position : relative; 를 지정해주면

이미지태그의 부모가 #header태그가 되면서 부모태그를 기준으로 (6,6)지점으로 변경된다!

자식태그의 position absolute 와 부모태그의 position relative는 한세트!

 

---

float

li{ float: left;}

li(menu list) 를 float left로 지정해주면 모든 li요소들이 가로배치된다

---

ul  메뉴리스트 ( li의 부모태그)

ul{ overflow: hidden;}

자식태그의 flaoat left 와 부모태그의 overflow hidden은 한세트!

---

.nyang_img_right{ position: absolute; right: 6px; top: 6px;}

---

.login_menu{position: absolute; left: 350px; top: 10px;}

---

.lesson_menu{ position: absolute; left: 225px; top: 40px;}

 

---

fixed position