<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:200px; height:50px; border:1px solid black;
}
#one{ background-color: cyan;}
#two{
/* position:static; */
/* position : relative; */
/* position : absolute;
/* position: fixed; */
/* left:100px; top:100px;
left:900px; top:600px;*/
}
#three{ background-color: brown;}
</style>
</head>
<body>
<div id="one">1번영역</div>
<div id="two">2번영역</div>
<div id="three">3번영역</div>
</body>
</html>
-요소의 출력 위치를 지정하는 방법
top, left, right, bottom을 이용하여 요소의 출력 위치를 지정할 수 있는데 이 속성들은 position의 영향을 받는다.
- top : 위쪽에서부터 떨어진 거리(y축좌표)
- left : 왼쪽에서부터 떨어진 거리(x축좌표)
- right : 오른쪽에서부터 떨어진 거리(
- bottom : 아래쪽에서부터 떨어진 거리
position
좌표를 지정하는 기준을 설정한다.
- static :기본적인 흐름에 맞게 위치가 결정된다.(기본값이고 출력 위치를 임의로 변경할 수 없다.)
- relative :정상적으로 출력될 위치를 기준으로상대적인 위치를 설정할 수 있다.
- absolute : 컨테이너의 원점을 기준으로 위치를 설정한다.(컨테이너 => 자신을 포함하는 요소 즉 부모요소 )
- fixed : 브라우저 창을 기준으로 위치를 지정한다. (fixed로 위치를 지정하면 스크롤이 되어도 항상 같은 위치에 배치된다.
'HtmlCss > CSS' 카테고리의 다른 글
| CSS - list(기호) (0) | 2019.05.25 |
|---|---|
| CSS - opacity , visibility (0) | 2019.05.25 |
| Css- border (0) | 2019.05.25 |
| Css - background (0) | 2019.05.25 |
| Css- Block요소,Display (0) | 2019.05.25 |
