Notice
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Jade_o.o

[css] position 본문

CSS

[css] position

by jade 2024. 1. 11. 15:37 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-position</title>
    <link rel="stylesheet" href="./attr3_postion.css">
</head>
<body>
    <h2>position(static, relative, absolute, fixed)</h2>
    <!-- <div class="position-static">static</div>
    <div class="position-relative">relative</div>
    <div class="position-absolute">absolute</div>
    <div class="position-fixed">fixed</div>
    <div class="position-relative">relative</div>
    <div class="container">
        <div class="position-absolute">relative</div>
    </div> -->

    <div class="container">
        <div></div>
        <div></div>
        <div></div>

    </div>
</body>
</html>

html 코드

 

body{
    background: linear-gradient(white,orange);
    height: 2000px;
    margin: 0;
    padding:0;
}

div{
    width:100px;
    height: 100px;
    font-weight: 700;
    text-align: center;
    border:1px solid gray;
    line-height: 100px;
}

/* position-static 
    - static은 기본값, 작성하지 않아도 됨
    - top, bottom, left, right 속성 적용 안됨
*/
.position-static{
    background-color: pink;
    position: static;
    top:50px;/*static 기본값이라 top이 적용 안됨*/
}

/* relative 
    - 일반적인 문서 흐름에 따라서 배치가 됨(자기 자리 보준)
    - 기준점이 자기 자신으로 배치됨
*/
.position-relative{
    position: relative;
    background-color: aquamarine;
    left:100px;
    /* right: 50px; */
}

/* absolute 
    - static이 아닌 값을 갖는 제일 가까운 조상 기준
    - 문서 흐름을 벗어남 (자기 자리가 없어짐)
*/
.position-absolute{
    position: absolute;
    background-color: gold;
    top:0;
    right: 0;
}

/* fixed
    - viewport 기준으로 특정 위치에 배치
    - 스크롤 되어보 움직이지 않음 > header 제작시 많이 이용
*/
.position-fixed{
    position: fixed;
    background-color: coral;
    top:0;
}

.container{
    width:400px;
    height: 300px;
    position: relative;
}

.container div{
    width:100px;
    height: 100px;
    border-radius: 50px;
    position: absolute;
}
.container div:nth-child(1){
    background-color: #9afaff;
    left:10px;
}
.container div:nth-child(2){
    background-color: #84ff8d;
    left:50px;
    z-index: 1;
}
.container div:nth-child(3){
    background-color: #ffeb88;
    left:100px;
}

css 코드

 

코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] display:flex  (2) 2024.01.11
[css] background 속성  (0) 2024.01.11
[css] 박스 모델 속성  (0) 2024.01.11
[css] 문자 관련 속성  (0) 2024.01.11
[css] css 공부 정리1_css 기본 정의  (0) 2024.01.11
'CSS' Related Articles more