더보기★
더보기
Position: fixed;
페이지내 이동과 상관없이 무조건 설정한 구역에 고정. id값을 주고 a태그를 걸어주면 지정된 id값위치로 이동가능
/*
position의 값이 fixed와 absolute는 요소가 inline, block, inline-block에 상관없이 가로,세로를 지정 가능.
가로, 세로가 없으면 요소가 안보임
=> 가로와 세로를 지정하거나 top, bottom, left, right를 이용하여 가로와 세로를 대체해야 함
*/
position 속성 정리
1) fixed - 브라우저화면기준으로 위치 고정
2) absolute - 직접 위치를 지정(fixed와 다름/브라우저화면기준아님)
3) relative - top,bottom,left,right설정의 값을 기준으로 이동(값 설정을 안하면 static이랑 똑같음)
4) static - 기본배치
<!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>fixed 예제</title>
<style>
body{height: 1000px;}
.up{width:80px; height:80px; border: 1px solid black; background-color: burlywood;
line-height: 80px; text-align: center; cursor: pointer; position: fixed;
right: 10px; bottom: 10px;}
</style>
</head>
<body id="body">
<a href="#body" class="up">top</a>
<div>안녕</div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_박스를 이등분으로 나란히 (0) | 2021.06.10 |
|---|---|
| CSS_float (0) | 2021.06.09 |
| CSS_box-sizing과 padding (0) | 2021.06.09 |
| CSS_clear와 float 속성 (0) | 2021.06.09 |
| CSS_calc()함수 (0) | 2021.06.09 |