728x90
반응형
Position property
- 포지션이 설정되지 않은 요소들을 무시하면서 요소를 마음대로 배치할 수 있는 속성
- static : defalut, 포지션이 설정되지 않은 상태
- absolute : 부모 요소 내에서 절대적인 위치를 설정 (부모 요소도 포지션이 설정되어있어야 부모로 인식된다.)
- relative : 해당 요소가 원래 있던 위치로부터 상대적인 위치를 설정
- fixed : 화면에 고정되는 위치를 설정
- sticky : 스크롤이 변하면서 고정될 위치를 설정
- 포지션을 설정하고 난 후 top/bottom, left/right로 위치를 설정할 수 있다.
- 포지션이 설정된 요소들 끼리는 겹칠 수 있으므로 높낮이 개념이 존재한다. (어떤 요소가 더 위에 있어야 하는지는 z-index property로 결정한다.)
position: relative;
< 웹 브라우저로 상세히 보기 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17_Position.html</title>
<link rel="stylesheet" href="./assets/css17.css">
</head>
<body>
<h3># Position property</h3>
<ul>
<li>포지션이 설정되지 않은 요소들을 무시하면서 요소를 마음대로 배치할 수 있는 속성</li>
<li>static : defalut, 포지션이 설정되지 않은 상태</li>
<li>absolute - 부모 요소 내에서 절대적인 위치를 설정
(부모 요소도 포지션이 설정되어있어야 부모로 인식된다.)
</li>
<li>relative - 해당 요소가 원래 있던 위치로부터 상대적인 위치를 설정</li>
<li>fixed - 화면에 고정되는 위치를 설정</li>
<li>sticky - 스크롤이 변하면서 고정될 위치를 설정</li>
<li>포지션을 설정하고 난 후 top/bottom, left/right로 위치를 설정할 수 있다.</li>
<li>포지션이 설정된 요소들 끼리는 겹칠 수 있으므로 높낮이 개념이 존재한다.
어떤 요소가 더 위에 있어야 하는지는 z-index property로 결정한다.
</li>
</ul>
<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
<div id="quiz-div">
<div>
<div>
</div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>
</div>
<div></div>
</div>
</div>
<div class="box" id="abs">absolute</div>
<div class="box" id="rel">relative</div>
<div class="box" id="fixed">fixed</div>
<div class="box" id="sticky">sticky</div>
<div id="test1">
<div class="box">a</div>
<div class="box">b</div>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio similique sunt incidunt harum reprehenderit nobis ratione velit reiciendis veniam deserunt perspiciatis maiores id enim, praesentium, ut eaque, error omnis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio similique sunt incidunt harum reprehenderit nobis ratione velit reiciendis veniam deserunt perspiciatis maiores id enim, praesentium, ut eaque, error omnis.
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
</body>
</html>* {
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: red;
color: white;
}
#abs {
/* 부모 요소 내부에서 절대적인 위치를 설정한다. */
position: absolute;
top: 0;
right: 100px;
}
#rel {
position: relative;
left: 200px;
top: 50px;
background-color: green;
}
#fixed {
position: fixed;
bottom: 0;
right: 0;
background-color: navy;
width: 100%;
z-index: -1;
}
#sticky {
/* 화면 내에서는 relative로 동작하다가 스크롤이 움직이면 해당 위치에 고정된다. */
position: sticky;
top: 150px; /* 스크롤이 위/아래로 움직일 때 고정될 위치 */
left: 300px; /* 스크롤이 왼쪽/오른쪽으로 움직일 때 고정될 위치 */
width: 200px;
height: 300px;
background-color: orangered;
z-index: -;
}
#test1 {
border: solid 5px black;
border-radius: 25px;
width: 700px;
height: 500px;
position: relative;
background-color: transparent; /* transparent: 투명색 */
}
#test1 > div.box:first-child {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
#test1 > div.box:nth-child(2) {
position: sticky;
height: 100%;
background-color: green;
left: 50px;
top: 50px;
}
#test1 > div.lorem {
position: absolute;
left: 50%;
top: 40%;
}
/* ------------------------------------------------- */
#quiz-div {
margin: 50px;
width: 700px;
height: 500px;
display: flex;
flex-wrap: wrap;
}
#quiz-div > * {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#quiz-div > :first-child > :first-child {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzAzMTNfMjkx%2FMDAxNjc4NjQ0NjQ5NTAy.1puZasQwL_H3byi8xCST4KixjUltuElHQhnAm81etYEg.8kLAdV7HYA83nyZmrBfUttSU-MuwCbWJebY6hPxCw3wg.JPEG.jwxny_%2FIMG_3461.JPG&type=sc960_832);
background-size: cover;
width: 150px;
height: 150px;
border-radius: 10px;
margin : 0 5px 5px 0;
}
#quiz-div > :first-child > :nth-child(2) {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA2MjJfMTAz%2FMDAxNjU1OTAyNTE3NDMw.7ztlR_vGVGThfuQrmxiTeBx8dEc9JjFeFpYrewx6x14g.KJ-hSQ0oZNcwEYAlLKn6_Y1OAK8qA3mvgp8aKRYz72Qg.JPEG.jangsodam4076%2F3571012d8eb75cf3a565efa8547fa871.jpg&type=a340);
background-size: cover;
width: 150px;
height: 150px;
border-radius: 10px;
margin : 0 5px 5px 0;
}
#quiz-div > :first-child > :nth-child(3) {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20160925_274%2Fahn3607_14747903245944uQWM_PNG%2FThat%2527s_No_Lady_19-20.png&type=a340);
background-size: cover;
width: 150px;
height: 190px;
border-radius: 10px;
margin-right: 5px;
}
#quiz-div > :nth-child(2) > :first-child {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxOTAyMTlfMjM4%2FMDAxNTUwNTAzNjk5Nzk4.Gmvccd_agBAPqIxLpqaeP7JxciUmkONyijFhJSJW3OAg.7gJhqGhjVQomivwJATHpy5mSi49BH3-rpqa60wbRdSkg.JPEG.wls6984%2FDgISnQwM_400x400.jpg&type=a340);
background-size: cover;
width: 200px;
height: 200px;
border-radius: 10px;
margin : 0 5px 5px 0;
}
#quiz-div > :nth-child(2) > :nth-child(2) {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20150713_56%2F96agyuuqdz_1436752203699ea2dT_PNG%2F30001-20150713.png&type=a340);
background-size: cover;
width: 200px;
height: 150px;
border-radius: 10px;
margin : 0 5px 5px 0;
}
#quiz-div > :nth-child(2) > :nth-child(3) {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEyMjhfMjk2%2FMDAxNjA5MTU0NDcxMzYw.SXcnPjDgqgUVNrN_RyAvKEqnJIIY4JnwcKvbOwoPN70g.9B7ms0IMWfVj6NlnLVeLpCz5sgfQo9wW1mFTJr5Z9bgg.JPEG.kikiehoh%2F0bfb9f58ed5515dc1ff9bdd04d0f4541.jpg&type=a340);
background-size: cover;
width: 200px;
height: 140px;
border-radius: 10px;
margin : 0 5px 0 0;
}
#quiz-div > :nth-child(3) > :first-child {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2FMjAxODAxMTBfMTcz%2FMDAxNTE1NTUyNTI0NTI4.pJUrH6FDuGwvoqv1nznoKxfkbknOc4zo0-kPMpAycJog.0MTKQ21rbi85NRE_DjgPojtiJ4Nk_AI8AMJO5xujTREg.JPEG.lysjust1%2Fspongebob-squarepants-patrick-star-mr-krabs-squidward-tentacles-sandy-cheeks.jpg&type=sc960_832);
background-size: cover;
width: 340px;
height: 200px;
border-radius: 10px;
margin : 0 0 5px 0;
}
#quiz-div > :nth-child(3) > :last-child {
background-image: url(https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20141021_87%2Fsykongpocket_1413893893126JVbpM_JPEG%2Fuinvers.jpg&type=a340);
background-size: cover;
width: 340px;
height: 295px;
border-radius: 10px;
}
/* --------------------------------------------------- */
.star {
position: absolute;
width: 50px;
height: 50px;
}
#star1 {
background-image: url(/html/resource/image/free-icon-hearts-2190560.png);
background-size: cover;
top: 430px;
left: 35px;
}
#star2 {
background-image: url(/html/resource/image/free-icon-hearts-2190560.png);
background-size: cover;
top: 275px;
left: 560px;
}
#star3 {
background-image: url(/html/resource/image/free-icon-hearts-2190560.png);
background-size: cover;
top: 775px;
left: 185px;
}728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Grid (0) | 2023.06.11 |
|---|---|
| [CSS] Flex (2) | 2023.06.08 |
| [CSS] Display (0) | 2023.06.08 |
| [CSS] Float (0) | 2023.06.08 |
| [CSS] 가상 요소 (0) | 2023.06.07 |
