8장 예제 - position 속성으로 요소 위치 저장하기

<!DOCTYPE html>

<head>

<title>position 속성으로 요소 위치 지정하기 </title>

<style>

* {

margin:0;

padding:0;

}

p {

width:300px;

border:3px solid balck;

padding:10px;

background-color: beige;

}

#static {position:static;}

#relative-1 { position:relative;}

#relative-2 {

position:relative; /*포지셔닝- relatvie*/

left:100px; /*왼쪽에서 100px 떨어지게 */

top:-50px; /*위쪽에서 -50px 떨어지게 (위로이동)*/

}

#fixed {

width:100px;

height:100px;

background-color:#222;

position:fixed; /*포지셔닝 -fixed */

right:30px; /*오른쪽에서 30px 떨어지게 */

top:30px; /*왼쪽에서 30px 떨어지게 */

}

</style>

</head>

<body>

<p id="static">c 프로그래밍</p>

<p id="relative-1">python 프로그래밍</p>

<p id="relative-2">Java 프로그래밍</p>

<p id="fixed">C++ 프로그래밍</p>

</body>

</html>

JuSoft