[Replit] Position - relative, absolute, fixed

15497 단어 htmlCSSCSS

Position

position 속성은 웹 문서 안 요소의 위치를 정하는 속성이다.
position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있다.

- Relative

static(기본값)이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 상대적 위치는 top, right, bottom, left 속성을 사용한다.

ex) relative

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            margin : 10px;
            display: inline-block;
            width: 300px;
            height: 100px;
            border: 3px solid black;
        }
        .box {
            background: blue;
            position: relative;
        	top: 10px;
        	left: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

-> 파란색 박스가 원래 static 위치를 기준으로 위에서 10px, 왼쪽에서 100px 떨어진다.

- Absolute

absolute 속성값은 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다
이때 기준위치는 가장 가까운 부모 요소의 position속성이다. relative인 요소이다

ex) absolute

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            display: inline-block;
            border: 3px solid black;
        }
        .container {
            margin: 40px;
            width: 800px;
            height: 1000px;
        }
        .box {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>
</html>

-> box는 position: absolute이기 때문에 왼쪽 상단 기준(부모요소 container) 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있다.

- Fixed

fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정한다. 브라우저 창이 기준 위치가 된다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정! (기준점: 브라우저 왼쪽 상단)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" 
   type="text/css" />
   <style>
   	header{
 	 	position: fixed;
  		left: 0;
  		right: 0;
  		top: 0;
  		height: 48px;
  		background-color: rgba(45,45,45,0.95);
	}
   </style>
  </head>
  <body>
    <header>      
    </header>
  </body>
</html>

-> left, right, top : 0 으로 기준을 잡아 width : 100% 와같은 효과를 주고, 상단에 고정했다.

C \ # 구조 체 struct 와 클래스 의 차이
vscode 단점 디버깅 js 코드 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage