> position
element 의 위치를 설정하는 css property
top, bottom, right, left property 를 조합해서 위치 설정 (위, 아래, 오른쪽, 왼쪽 "으로부터" 얼마나 떨어져 위치할지)
1. relative
원래 위치 (normal position) 기준으로 위치 설정
<head>
<style>
div{
width:100px;
height:40px;
border:3px solid red;
}
#div1{
position:relative;
left:30px;
}
</style>
</head>
<body>
<div id="div1">example1</div>
<br>
<div>example2</div>
<br>
<div>example3</div>
</body>
2. fixed
viewport (브라우저 창) 기준으로 위치 설정 (정상적인 배치 흐름에서 제외됨)
<head>
<style>
div{
font-size:30px;
}
a{
position:fixed;
right:50px;
bottom:30px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum quis corporis obcaecati, asperiores odit accusantium architecto voluptatem, facilis magnam accusamus facere nam optio voluptatibus blanditiis maxime? Quos, aperiam. Minus unde ad reprehenderit nobis beatae nostrum ipsam sunt? Iste repellat amet aliquam. Consequuntur beatae harum ipsa corrupti, sapiente eligendi nemo autem quisquam ut, possimus tempora optio quos unde, itaque ipsum. Necessitatibus quae sequi at omnis voluptatum deserunt reprehenderit hic repellat ab consectetur, alias maiores quia neque sit. Harum incidunt quibusdam eveniet laudantium totam saepe, fuga sed eos consectetur voluptatum suscipit molestias voluptas facere. Officiis temporibus sit commodi tenetur corrupti dicta eaque.</div>
<a href="#top">위로 이동</a>
</body>
* 페이지의 맨위로 이동하는 링크
<a> tag 의 href attribute 값으로 #top 작성
<a href="#top">맨 위로 이동</a>
3. sticky
어느정도까지는 relative, 이후부터는 fixed 처럼 위치
<head>
<style>
div{
font-size:30px;
}
h1{
border:5px solid green;
background-color:burlywood;
position:sticky;
top:10px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, laborum?</div>
<h1>sticky example.</h1>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, et, cumque earum fugiat voluptate dolorem nisi voluptas inventore eligendi rem doloremque recusandae molestias blanditiis quisquam, a impedit! Ad quas labore consectetur voluptate in eos iure explicabo aspernatur. Alias, et doloribus exercitationem dolores provident rerum facere reprehenderit, laboriosam voluptates corporis esse eius sed! Ea voluptas itaque aperiam placeat, voluptatibus consectetur eligendi error mollitia beatae quidem ipsam veniam dolor veritatis voluptate cupiditate velit at totam enim neque provident voluptates vero expedita repellat! Molestias facere, alias vel inventore, voluptatem distinctio quo quam ducimus quis suscipit laborum saepe odit pariatur architecto perspiciatis commodi vitae?</div>
</body>
4. static
position 의 기본값, 특별히 정해진 위치가 없음
5. absolute
조상 요소 중 가장 가까운, 포지션된(position 값이 static 이 아닌) 요소 기준으로 위치 설정 (정상적 배치 흐름에서 제외됨)
<head>
<style>
.relative{
position:relative;
width:400px;
height:200px;
border:3px solid violet;
}
.absolute{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="relative">relative
<div class="absolute">absolute</div>
</div>
</body>
* hover dropdowns
<head>
<link href="../icon/css/all.css" rel="stylesheet">
<style>
.main-menu{
display:flex;
background-color:#333;
font-size:16px;
color:white;
}
.main-menu-item{
padding:14px;
position:relative;
}
.main-menu-item:hover{
background-color:red;
}
.drop-down-menu{
display:none;
position:absolute;
background-color:white;
color:black;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
left:0px;
top:50px;
padding:14px;
width:80px;
}
.main-menu-item:hover>.drop-down-menu{
display:block;
}
</style>
</head>
<body>
<div class="main-menu">
<div class="main-menu-item">Home</div>
<div class="main-menu-item">News</div>
<div class="main-menu-item">
Dropdown
<i class="fas fa-caret-down"></i>
<div class="drop-down-menu">
<div class="drop-down-menu-item">Link 1</div>
<div class="drop-down-menu-item">Link 2</div>
<div class="drop-down-menu-item">Link 3</div>
</div>
</div>
</div>
</body>
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
day08 - flexbox (0) | 2021.11.03 |
---|---|
day07 - list, table (0) | 2021.10.28 |
day06 - link, pseudo class, combinator (0) | 2021.10.23 |
day05 - font (0) | 2021.10.22 |
day04 - box model (0) | 2021.10.20 |