[HTML&CSS] position
2020. 11. 30. 18:23ㆍHTML&CSS&JavaScript
position 속성 정리
| 종류 | absolute, fixed | relative | static |
| 너비 | 최대한 줄어든다. | 그대로 유지 | 그대로 유지 |
| 본질 | 유령화, 유령의집화 | 유령의집화 | 사람화 |
| 겹침허용 | 겹치는게 가능 | 겹치는거 불가능 | 겹치는거 불가능 |
| 이동 | top, left, right, bottom으로 이동 | - | - |
| static은 기본값 absolute는 주변과 상관없이 존재하는 것, 개별적으로 크기, 위치 등 조절 가능 relativ 유령을 가두는 능력은 있지만 자신은 유령이 되지 않음 유령 순서를 바꾸는 것 => z-index 기본적으로 유령의 우선순위는 나중에 생성된 태그가 우선 |
※disply 속성
-none: 아예 안보이는 것
-block: 세로로 정렬
-inline: 가로로 정렬
<HTML>
<article>
<section>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
<div></div>
</section>
</article><CSS>
article {
position:absolute;
top:10%;
left:10%;
right:10%;
bottom:10%;
border:10px solid black;
}
article > section {
width:50%;
height:50%;
position:absolute;
top:0;
left:0;
}
article > section:nth-child(2) {
top:0;
right:0;
left:auto;
}
article > section > div {
width:40%;
height:40%;
background-color:red;
border:5px solid black;
position:absolute;
}
article > section > div:nth-child(1) {
top:10%;
left:10%;
}
article > section > div:nth-child(2) {
background-color:orange;
top:30%;
left:30%;
}
article > section > div:nth-child(3) {
background-color:green;
top:50%;
left:50%;
}
article > section:nth-child(2) > div:nth-child(2) {
z-index:1;
}
'HTML&CSS&JavaScript' 카테고리의 다른 글
| 20.11.30 풀 다운 메뉴 v3 만들기 4 (0) | 2020.11.30 |
|---|---|
| [HTML&CSS] 선택자 연습 (0) | 2020.11.30 |
| [HTML&CSS] h1, h2.... (0) | 2020.11.27 |
| [HTML&CSS] ul, ol, li (0) | 2020.11.27 |
| [HTML&CSS] nav, ul, ol, li, a 등 개념 정리 (0) | 2020.11.27 |