YJ의 새벽

CSS ( 레이아웃 ( position )) 본문

WebFront_/HTML,CSS

CSS ( 레이아웃 ( position ))

YJDawn 2023. 2. 7. 20:42
  • position  ( 레이아웃 위치 )

--레이아웃 위치는 절대좌표와 상대좌표로 구분.

--절대좌표는 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정하는것.

--절대좌표 = position : absolute ; 로 사용. 

--절대좌표는 브라우저 왼쪽 상단이 기준점이 되며 ,

   오른쪽 하단의 지정된 좌표로 이동하여 표시

--모든 요소의 기준점은 좌측상단이 시작점 ( 0,0 )   = ( x,y )

 

--position속성은 지정한 요소들을 원하는 위치에 배치할 수 있는 속성.

    - 가장먼저 어디를 기준으로 위치시킬것인지 대상을 정해야한다.

 

**position : relative = 요소의 위치를 절대값으로 설정 (기준 : 자기 자신 )

**position : absolute = 요소 위치를 상대적인 위치 값으로 설정 (기준 : 부모 기준 )   

**position : fixed = 페이지 전체 영역에서 고정 설정 ( 기준 : 브라우저 )

**position : sticky = 부모 영역 안에서만 고정 ( 기준 : 부모 기준 )

**position : static = 문서 흐름에 따른 기본위치 ( 기본값 )   좌표속성값이 무시됨.

 

 

    EX ))) position 속성 예제  ( static , relative )

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>position 속성 예제</title>
	<style>
		/* position 속성의 기본 값 static 기본값유지. */
		.static {
			width: 200px;
			height: 200px;
			background: red;
			position: static;			
		}
		/* position 속성 값 relative left, bottom 좌표 값 적용 */
		.relative {
			width: 200px;
			height: 200px;
			background: blue;
			position: relative; 
			left: 50px; 
			bottom: 20px;
			/* right:-10px; */
			/* left:50px;
			bottom:-10px; */
		}
	</style>
</head>
<body>
	<div class="static">static</div>
	<div class="relative">relative</div>
</body>
</html>

 

 

 

    EX ))) position 속성 예제  ( fixed  )

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 720px;
            height: 1000px;
            margin: auto;
            border: 1px solid #b8064d;
            background-color: #f8e1eb;
            color:#b8064d;
            padding-left:10px
        }
        .child {
            width: 200px;
            border: 1px solid #b8064d;
            background-color: #f8e1eb;
            position: fixed;
            top: 100px;
            left: 100px;
            color:#b8064d;
            padding-left:10px
        }
    </style>
</head>
<body>    
    <!-- position:fixed 경우 부모 요소의 position 속성과 무관하게 window창 기준. -->
    <div class="parent">
        <p>fixed 예제</p>
        <div class="child">
            <p>고정된 div</p>
        </div>
        <p> 스크롤옮겨도 고정됨.</p>
    </div>
</body>
</html>

 

 

 

    EX ))) position 속성 예제  ( absolute )

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>절대 좌표 예제</title>
    <style>
        .parent {
            width: 720px;
            height: 1000px;
            margin: auto;
            border: 1px solid #b8064d;
            background-color: #f8e1eb;
            color:#b8064d;
            padding-left:10px
        }
        .child {
            width: 200px;
            border: 1px solid #b8064d;
            background-color: #f8e1eb;
            position: absolute;
            top: 30px;
            left: 50px;
            color:#b8064d;
            padding-left:10px
        }
    </style>
</head>
<body>
    <!--
position:absolute 경우, 부모 요소가 static 외 속성값 갖는 position 속성 있으면 
해당 부모 요소 기준.

부모나 조상 중 position:static 외의 속성값을 취하는 position 속성 없으면, 
window 창 기준.
    -->
    <div class="parent">
        <p>absolute예제</p>
        <div class="child">
            <p>자식 요소</p>
        </div>
        <p>부모 요소</p>
    </div>
</body>
</html>

 

 

 

    EX )))) position 예제 ( sticky )

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		.wrap { 
			height: 100px;
			overflow: hidden;
			overflow-y: scroll;
		}
		.inner {
			height:130px;
			background: skyblue;
		}	
		.box {
			position: sticky;
			top: 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background: #000; 
		} 
	</style>
</head>
<body>
	<div class="wrap">
		<div class="inner"> <!-- 부모 요소 inner (기준) -->
			<div class="box"></div> <!-- 자식 요소 box (고정될 요소) -->
		</div>
	</div>
</body>
</html>

 

 

 

    EX ))))  position  total 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		.container {
			border: 3px solid red;
			width: 100%;
			height: 1000px;
			position: relative;
		}
		.position {
			width: 150px;
			height: 50px;
			top: 100px;
			left: 120px;
		}
		.static {
			border: 3px solid black;
			position: static;
		}
		.relative {
			border: 3px solid green;
			position: relative;
		}
		.fixed {
			border: 3px solid orange;
			position: fixed;
		}
		.absolute {
			border: 3px solid blue;
			position: absolute;
		}
	</style>
</head>
<body>
	<h1>정적 위치(static position) 지정 방식의 특징</h1>
	<div class="container">
		<div class="static position">정적 위치(static position)</div>
		<div class="relative position">상대 위치(relative position)</div>
		<div class="fixed position">고정 위치(fixed position)</div>
		<div class="absolute position">절대 위치(absolute position)</div>
	</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

*** z-index : z축 (3차원) + 인덱스(순서)

 

--해당요소의 순서를 제어하는 속성.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		.box01 {
			position: relative;
			width: 200px;
			height: 200px;
			background-color: red;
			z-index: 2;
		}
		.box02 {
			position: relative;
			left: 10px;
			top: -70px;
			width: 200px;
			height: 200px;
			background-color: blue;
			z-index: 1;
		}
	</style>
</head>
<body>
	<div class="box01">box01</div>
	<div class="box02">box02</div>
</body>
</html>

z-index 로 순서를 바꾼다.

 

 

 

 

 

 

 

 

'WebFront_ > HTML,CSS' 카테고리의 다른 글

CSS ( 반응형 웹디자인 )  (0) 2023.02.10
CSS ( 레이아웃, flex , grid )  (0) 2023.02.08
CSS ( 레이아웃 ( float ))  (0) 2023.02.07
CSS ( 폼 (input,로그인,회원가입))  (0) 2023.02.06
CSS ( 테이블 )  (0) 2023.02.03
'WebFront_/HTML,CSS' Related Articles more
Comments