CSS position

정원·2022년 7월 17일

목록 보기

4/5

CSS position

8.position

position basic

position: relative
left: 100px
top: 100px
자기가 있던 위치에서 왼쪽에서부터 100px 위에서부터 100px 멀어짐

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 300px;
            border: 4px dashed lightblue;
            margin: 100px 0;
        }
        .box{
            width: 150px;
            height: 100px;
            background: red;
            border: 4px dashed orange;

            position: relative; /*자기가 있던 곳을 기준으로 멀어짐*/
            left: 160px;
            top: 150px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

relative

음수도 줄 수 있음
다른 요소에는 영향을 주지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            border: 4px dashed orange;
            border-radius: 10px;
        }
        .relative{
            position: relative;
            left: 70px;
            top: -50px;
        }
        /*다른 요소에는 영향을 안줌*/
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box relative">2</div>
    <div class="box">3</div>
</body>
</html>

absolute

absolute : 이동되면 원래 자리를 다른 요소가 자리름 채움
부모에게 영향을 받음
항상 직속부모가 아니기 때문에
원하는 기준 부모에게 position:relative를 줘야함
position:relative를 준 부모의 기준으로 움직임.
position 안주면 viewport기준으로 이동
상하/좌우 두개다 값을 줘야함 (0이라도 쓰기)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandparent{
            width: 400px;
            height: 300px;
            padding: 100px;
            border: 4px dashed gray;
            position: relative;
        }
        .parent{
            width: 300px;
            height: 300px;
            border: 4px dashed lightgray;
            position: relative;
        }
        .child{
            width: 120px;
            height: 80px;
            background: tomato;
            border: 4px dashed red;
            border-radius: 10px;
            font-size: 30px;
        }
        .absolute{
            position: absolute;
            right: 100px;
            bottom: 150px;            
        }
    </style>
</head>
<body>
    <div class="grandparent">
        <div class="parent">
            <div class="child">1</div>
            <div class="child absolute">2</div>
            <div class="child">3</div>
        </div>
    </div>
</body>
</html>

position 연습1

더보기 a태그에 absolute.
부모요소에 position: relative 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article{
            width: 300px;
            background: #ffeffe;
            border: 2px solid #ccc;
            padding: 10px;
            position: relative;
        }
        article h1{
            font-size: 18px;
            color: #080;
            margin: 0;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        li a{
            text-decoration: none;
            color: #666;
        }
        li a:hover{
            text-decoration: underline;
            color: #00f;
        }
        .absolute{
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <article>
        <h1>동물병원 24시</h1>
        <ul>
            <li><a href="#">밥 먹이는 시간 지킬 것</a></li>
            <li><a href="#">길고양이 주사 맞히기</a></li>
            <li><a href="#">눈 아픈 동물 목에 깔때기 씌우기</a></li>
            <li><a href="#">매일 목욕 시킬 것</a></li>
            <li><a href="#">이름없는 애들 이름 짓지 말기</a></li>
        </ul>
        <div class="more absolute"><a href="#">더보기</a></div>
    </article>
</body>
</html>

댓글창구현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        .list-wrap{
            width: 50%;
            border: 1px solid black;
            margin: 20px auto 0;
            padding: 10px;
            position: relative;
        }
        .list-img{
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .list-img img{
            width: 50px;
        }
        .list-content{
            padding-left: 60px;
        }
        textarea{
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            resize: none;
            /*textarea 기본적으로 자유롭게 늘어남
            resize: none 사이즈변경 불가*/
        }
        .list-control{
            padding-left: 60px;
        }
        .list-input{
            float: left;
        }
        input{
            display: block;
            width: 100px;
        }
        button{
            float: right;
            /*button은 인라인요소
            인라인 요소에 float를 주면 
            display가 block으로 바뀜*/
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .list-content p{
            padding: 5px;
        }
        .list-content p:first-child{
            font-weight: bold;
        }

        /* strong{
            font-weight: bold;
        }
        .list-input .writer{
            float: left;
            margin-bottom: 10px;
        } */
    </style>
</head>
<body>
    <div class="list-wrap clearfix">
        <div class="list-img">
            <img src="./img/bgimg.png" alt="사진">
        </div>
        <div class="list-content">
            <textarea rows="10" placeholder="댓글내용"></textarea>
        </div>
        <div class="list-control">
            <div class="list-input">
                <input type="text">
                <input type="text">
            </div>
            <button type="button">등록하기</button>
        </div>
    </div>
    <div class="list-wrap clearfix">
        <div class="list-img">
            <img src="./img/bgimg.png" alt="사진">
        </div>
        <div class="list-content">
            <p>작성자</p>
            <p>내용</p>
        </div>
        <div class="list-control ">
            <button type="button">삭제</button>
            <button type="button">수정</button>
        </div>
    </div>

    <!-- <div class="list-wrap ">
        <div class="list-img">
            <img src="./img/bgimg.png" alt="사진">
        </div>
        <div class="list-control clearfix">
            <div class="list-input">
                <p class="writer"><strong>작성자</strong></p>
                <p>내용</p>
            </div>
            <button type="button">삭제</button>
            <button type="button">수정</button>
        </div>
    </div> -->
</body>
</html>

fixed

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
        }
        .grandparent {
            width: 400px;
            height: 300px;
            padding: 100px;
            border: 4px dashed gray;
        }
        .parent {
            width: 300px;
            height: 300px;
            border: 4px dashed lightgray;
        }
        .child {
            width: 120px;
            height: 80px;
            background: tomato;
            border: 4px dashed red;
            border-radius: 10px;
            font-size: 30px;
        }
        /*fixed:view port 기준
            absolute와 차이 scrol이 생겼을때도
            그 위치에 고정!!!*/
        .fixed {
            position: fixed;
            right: 10px;
            bottom: 50px;
        }
    </style>
</head>

<body>
    <div class="grandparent">
        <div class="parent">
            <div class="child">1</div>
            <div class="child fixed">2</div>
            <div class="child">3</div>
        </div>
    </div>
</body>

</html>

sticky

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 400px;
            border: 4px solid red;
            margin: 50px;
            overflow: auto;
        }
        section{
            height: 200px;
            border: 4px dashed lightgray;
        }
        section h1{
            text-align: center;
            line-height: 2;

            /*sticky:스크롤있을때 기능
            top,bottom,right,left 중에 하나를 필수로 설정해야함
            설정한 위치에 도달하기 전까지 static 처럼 동작하다가
            설정한 위치에 도달하면 스크롤 영역 내에서 fixed처럼 동작
            */
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <section>
            <h1>Title 1</h1>
        </section>
        <section>
            <h1>Title 2</h1>
        </section>
        <section>
            <h1>Title 3</h1>
        </section>
        <section>
            <h1>Title 4</h1>
        </section>
        <section>
            <h1>Title 5</h1>
        </section>
        <section>
            <h1>Title 6</h1>
        </section>
        <section>
            <h1>Title 7</h1>
        </section>
        <section>
            <h1>Title 8</h1>
        </section>
    </div>
</body>
</html>

position 연습2

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        aside{
            width: 200px;
            position: fixed;
            left: 70px;
            top: 80px;
        }
        aside nav ul{
            width: 150px;
            margin: 10px 0;
        }
        aside nav ul li{
            background:#123456;
            margin: 2px 0;
            padding: 5px;
            font-size: 16px;
            font-weight: bold;
        }
        aside nav ul li a{
            text-decoration: none;
            color: #fff;
        }
        
        aside nav ul li a:hover{
            text-decoration: underline;
            color:firebrick;
        }
        .content{
            width: 70%;
            background: lightblue;
            height: 1000px;
            margin-left: 30%;
            padding: 20px;
            line-height: 1.4;
            text-indent: 10px;
        }
        footer{
            background: #000;
            padding: 40px 20px;
        }
        footer address{
            font-size: 20px;
            color: #fff;
        }
    </style>
</head>

<body>
    <aside>
        <nav>
            <ul>
                <li><a href="#">COMPANY</a></li>
                <li><a href="#">PRODUCT</a></li>
                <li><a href="#">SERVICE</a></li>
                <li><a href="#">COMMUNITY</a></li>
            </ul>
        </nav>
    </aside>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar lectus at nisi feugiat facilisis. Phasellus
        vehicula, mauris ac feugiat hendrerit, dui ligula condimentum sem, sagittis suscipit risus dolor ac sapien.
        Maecenas interdum varius turpis, sed consequat urna tincidunt sit amet. Donec facilisis risus lorem, vitae
        tincidunt odio tincidunt eu. Donec dictum lacus turpis, vel semper mauris placerat sed. Integer nisl nisi,
        eleifend sed placerat in, vulputate non eros. Mauris augue nulla, gravida quis ipsum ac, imperdiet sollicitudin
        magna. Aenean placerat, lectus rhoncus ornare laoreet, nibh ligula maximus erat, non convallis neque ante at
        tellus. Donec commodo libero nec leo feugiat pellentesque.<br>
    </div>
    <footer>
        <address>Copyright Allright Reserved.</address>
    </footer>
</body>

</html>

position 연습3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        body{
            background-image: url(./images/bg.png);
        }
        header .logo{
            width: 100%;
            margin: 20px auto;
            text-align: center;
        }
        .menu{
            background: black;
            text-align: center;
        }
        .menu li {
            display:inline-block;
            padding: 20px;
        }
        .menu li :hover{
            background: #4d4d4d;
        }
        .menu li a{
            text-decoration: none;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
        .slider{
            background: #fff;
        }
        .slider ul {
            width: 75%;
            margin: 0 auto;
        }
        .slider ul li{
            width: 25%;
            box-sizing: border-box;
            float: left;
            text-align: center;
            margin: 40px 0;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .top{
            width: 50px;
            height: 50px;
            background: #c13333;
            position: fixed;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 50px;
        }
        .top a{
            color: white;
            text-decoration: none;
        }
        section{
            width: 700px;
            margin: 0 auto;
            position: relative;
        }
        section .left{
            position: absolute;
            top: 0;
            left: -240px;
        }
        section .right{
            position: absolute;
            top: 0;
            right: -240px;
        }
        
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="./images/logo.jpg" alt="로고">
        </div>
        <nav>
            <ul class="menu">
                <li><a href="">메뉴 1</a></li>
                <li><a href="">메뉴 2</a></li>
                <li><a href="">메뉴 3</a></li>
                <li><a href="">메뉴 4</a></li>
            </ul>
        </nav>
    </header>
    <article class="slider">
        <ul class="clearfix">
            <li><img src="./images/item01.png" alt=""><br>iPone</li>
            <li><img src="./images/item02.png" alt=""><br>ipod</li>
            <li><img src="./images/item03.png" alt=""><br>iPad</li>
            <li><img src="./images/item04.png" alt=""><br>iMac</li>
            
        </ul>
    </article>
    <section>
        <div class="content">
            <img src="./images/ipad.jpg" alt="">
        </div>
        <aside class="left">
            <img src="./images/side01.png" alt="">
            <br><br>
            <img src="./images/side02.png" alt="">
        </aside>
        <aside class="right">
            <img src="./images/side03.png" alt="">
            <br><br>
            <img src="./images/side04.png" alt="">
        </aside>
    </section>
    <div class="top">
        <a href="#">TOP</a> 
    </div>
</body>
</html>

stack-order

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container .box {
            position: relative;
            width: 100px;
            height: 100px;
            background: tomato;
            border: 4px dashed black;
            font-size: 30px;
            margin-right: -30px;
            float: left;
        }
        .box1 {
            z-index: 0;
        }
        .box2 {
            z-index: -200;
        } 
        .box3 {
            z-index: 100;
        } 
        .box4 {
            z-index: 10;
        } 
        .box5 {
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
    </div>
</body>

</html>

position 실습

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            margin: 100px auto 0;
        }
        .container .box{
            position: relative;
            width: 100px;
            height: 100px;
            background: tomato;
            border: 4px dashed yellow;
            border-radius: 10px;

            font-size: 30px;
            margin-right: -30px;
            text-align: center;
            line-height: 100px;
            float: left;
            transition: 0.5s;
        }
        .container .box:hover{
            background: yellowgreen;
            border-color: red;
            z-index: 10;
            /* position: relative;
            bottom: 20px; */
            transform: translateY(-20px);
            cursor: pointer;
            /*cursor: pointer 손가락모양*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
    </div>
</body>
</html>