특징
1. margin:0 auto 속성이 무시된다.
2.모든 position 속성의 공통특징으로는 이동시 left,right,top,bottom으로 태그를 이동 할 수 있다. 작성시 다른 태그와 겹치는 현상이 발생하여도 이동시 방해 받지 않고 이동이 가능하다.
속성에 따라 상대좌표 이동과 절대좌표 이동이 된다.
상대좌표이동은 현재 위치에서 이동되는것이고 절대 좌표이동은 웹사이트 화면을 기준으로 이동된다.
1. position : fixed (절대좌표이동)
웹사이트에 선택한 태그를 고정시켜서 웹사이트의 스크롤을 위아래로 이동하여도 고정시킬 수 있다.(맨위로 버튼, 상담버튼,최상단 메뉴 등)
여러태그에 사용하게 되면 웹사이트의 가독성이 떨어질 수 있으므로 가급적 필요한 태그에만 사용 한다.(보이는 영역이 그만큼 줄어들기 때문)
margin : 0 auto 속성적용이 되지 않는다. position:fixed태그를 사용하게되면 사용하지 않은 태그는 해당태그를 무시하고 이동하게 된다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position #1</title>
<style>
*{margin:0;padding:0;}
#a{width:500px;height:500px;
margin:0 auto;background-color:red}
#a div{width:100px;height:100px;margin:0 auto;}
#a div:nth-child(1){background-color:#123456;position:fixed;}
#a div:nth-child(2){background-color:orange;}
#a div:nth-child(3){background-color:pink;}
#scroll{height:3000px;}
</style>
</head>
<body>
<div id="a">
<div></div>
<div></div>
<div></div>
</div>
<div id="scroll"></div>
</body>
</html>
위와 같이 작성 하여 출력하면 파란색 div태그는 중앙정렬에서 벗어나 모 태그의 끝에 위치해서 고정되어 있는것을 확인 할 수 있다.
2. position : relative (상대좌표이동)
position:relative는 다른 position 속성과 다르게 margin:0 auto가 적용된 상태의 현재 위치에서도 이동이 가능하다.
position:relative는 position 속성중 유일하게 이동하여도 다른 태그가 그위치로 이동하지 않는다.
#a div:nth-child(1){background-color:#123456;}
#a div:nth-child(2){background-color:orange;position:fixed;left:200px;}
#a div:nth-child(3){background-color:pink;}
position:fixed를 사용하면 3번째 태그가 position:fixed를 사용한 2번째 태그를 무시하고 그위치로 이동한다.
#a div:nth-child(1){background-color:#123456;}
#a div:nth-child(2){background-color:orange;position:relative;left:200px;}
#a div:nth-child(3){background-color:pink;}
position:relative를 적용시키면 margin:0 auto상태에서 왼쪽에 200px 남기고 이동하며 3번째 태그가 2번째 태그 위치로 이동하지 않는다.
position:relative를 사용하는때는 첫번째 태그에 margin-top를 입력해야 할 때인데 이유는 margin-top가 첫번째 태그에 사용할 경우 첫번째 태그가아닌 대상의 부모 태그에 적용이 되기 때문이다.
#a div:nth-child(1){background-color:#123456;margin-top: 100px;}
#a div:nth-child(2){background-color:orange;}
#a div:nth-child(3){background-color:pink;}
1번째 태그에 margin-top:100px가 적용되지 않고 부모태그에 적용되었다.
#a div:nth-child(1){background-color:#123456;position: relative;top:100px;}
#a div:nth-child(2){background-color:orange;margin-top:100px;}
#a div:nth-child(3){background-color:pink;}
1번째 태그에 position:relative 를 적용하고 top:100px를 적용하여 margin-top:100px와 같은 효과를 주었고 2번째 태그와 3번째 태그도 아래로 이동하기 위해 2번째 태그에 margin-top:100px를 적용하였다. 200px를 적용하지 않는 이유는 2번째 태그가1번째 태그를 무시 하지 않고 원래 자리에 위치하고 있기 때문이다.
3. position : absolute (절대좌표이동)
position:fixed에서 고정되는 특징빼고는 대부분 같은 특징을 가지고있다.
원하는 태그를 겹치고 싶을때 사용한다.
position:absolute의 경우 부모 태그에게 position:relative를 사용하면 웹사이트를 기준으로 하는 절대좌표이동이 아닌 부모 태그를 기준으로 left,right,top,bottom 값이 적용된다.
#a{width:500px;height:500px;background-color:red;
margin:0 auto;}
#a div{width:100px;height:100px;
margin:0 auto;}
#a div:nth-child(1){background-color:orange;position:absolute;left:100px;}
#a div:nth-child(2){background-color:pink;}
#a div:nth-child(3){background-color:blue;}
position:fixed와같이 절대좌표로 이동하면 2번째 div태그가 그위치로 이동한다.
#a{width:500px;height:500px;background-color:red;
margin:0 auto;position:relative;}
#a div{width:100px;height:100px;margin:0 auto;
position:absolute;right:100px;bottom:100px;}
#a div:nth-child(1){background-color:blue;}
부모태그에 position:relative 속성을 주고 position:absolute적용 하면 부모태그를 기준으로 left:100px,bottom:100px가 적용된다.
HTML web2 16일차 - transform (0) | 2023.06.05 |
---|---|
HTML web2 15일차 - z-index (0) | 2023.06.04 |
HTML web2 10일차 - 구글 개발자 도구, 지도사용법, 폰트사용법 (0) | 2023.06.01 |
07일+08일차 css슬라이드 응용, 드롭다운메뉴 (0) | 2023.05.30 |
HTML web2 08일차 - transition (0) | 2023.05.29 |