.phone{background: url(./images/iphone_mockup.png) center no-repeat;
height: 1112px;width:731px;position: absolute;left:50%;top:50%;margin:-556px 0 0 -365px;}
.phone .mainwrap{width: 375px;height:667px;overflow: hidden;position: absolute;left:178px;top:222px;}
.phone .mainwrap .gnb{position: absolute;left: 0;top:0;z-index: 2;}
.phone 은 x, y 축 중앙정렬이면서, 정확한 width, height값과 position: absolute를 갖고 있음.
.mainwrap도 정확한 width, height 값을 가지면서 position: absolute를 갖고 있고, 부모인 .phone 기준으로 실행됨.
.phone 기준으로 x, y축을 px단위로 가짐
따라서 .phone이 중앙정렬이므로, .mainwrap도 중앙정렬됨.
.gnb는 .mainwrap 기준으로 position 속성 실행
'프로그래밍 예제 > HTML & CSS 예제' 카테고리의 다른 글
html 마우스 우클릭, 드래그, 클릭 방지 (0) | 2019.01.16 |
---|---|
css로 중앙 가운데 정렬 (0) | 2019.01.16 |
css로 [<,>] 만들기 (0) | 2019.01.11 |