css의 position속성 중 sticky가 적용이 안돼서 질문드립니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
css의 position속성 중 sticky가 적용이 안돼서 질문드립니다.

QA

css의 position속성 중 sticky가 적용이 안돼서 질문드립니다.

본문

안녕하세요! 지금 html, css기초 하는 중인데 css의 position속성 중 sticky가 적용이 안돼서 질문드립니다..

구글링 해서 align-self도 해보고 z-index도 해보고 부모 요소의 heigh을 설정하면 밑 태그들이 뒤로 밀려나서 어떨게 해야할지 모르겠습니다 ㅜㅜ

아래 코드중 class="k"부분을 sticky top 0px을 하고싶은데 어디를 어떻게 고치면 좋을까요..?

밑 p태그들은 임의로 작성해 놓은 것입니다..!

 


    body{
         margin: 0px;
        }
    .title{
        position: relative;
        top: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        position: fixed;
        top:0px;
        background-color: white;
 
    }
    .sale{
        box-sizing: border-box;
        width: 100%;
        background-color: #73864f;
        text-align: center;
        height: 35px;
 
    }
    .text{
        box-sizing: border-box;
        height: 35px;
        margin: 0px;
        padding-top: 9px;
        padding-bottom: 9px;
        color: white;
        font-size: 13px;
    }
    .name{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding-right: 150px;
        padding-left: 150px;
        margin-top: 10px;
       
    }
    .logo{
        box-sizing: border-box;
        width: 250px;
        height: 70px;
        background-image: url(./salad.jpg);
        background-size: 70px 70px;
        background-repeat: no-repeat;
        background-position: left;
        padding-bottom: 12px;
        padding-top: 12px;
        padding-left: 80px;
}
       
       .logo1{
        box-sizing: border-box;
        margin: 0px;
        width: 170px;
        color: #73864f;
        font-size: 28px;
       }
       .logo2{
        box-sizing: border-box;
        margin: 0px;
        width: 170px;
        font-size: 12px;
        text-align: center;
        padding-right: 15px;
        color: #73864f;
       }
       .lit{
        display: flex;
       }
       .lit2{
        box-sizing: border-box;
        width: 63px;
        height: 70px;
        padding: 23px 0px;
        text-align: center;
        color: gray;
        font-size: 12px;
       }
       .lit2:hover{
        color:#73864f;
       }
       .k{
       width: 100%;
       background-color: white;
       position: sticky;
       top: 0px;
       z-index: 100;
       }
    .list{
        display: flex;
        width: 750px;
        justify-content: space-around;
        box-sizing: border-box;
        padding-left: 150px;
        margin-top: 20px;
        background-color: white;
       
    }
    .imgg{
        width: 20px;
        height: 20px;
        background-image: url(./bar.png);
        background-repeat: no-repeat;
        background-size: contain;
       }
       .list2{
        display: block;
        box-sizing: border-box;
        width: 72px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list3{
        display: block;
        box-sizing: border-box;
        width: 90px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list4{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list5{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list6{
        display: block;
        box-sizing: border-box;
        width: 41px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list7{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
 
   
</style>
<body>
    <div class="title">
        <div class="sale">
           <p class="text">지금 가입하면 3만원 쿠폰팩 지급!</p>
        </div>
        <div class="name">
          <div class="logo">
              <h3 class="logo1">SALADMEAL</h3>
              <p class="logo2">salad & mealkit</p>
          </div>
          <div class="lit">
              <span class="lit2">로그인</span>
              <span class="lit2">회원가입</span>
              <span class="lit2">주문내역</span>
              <span class="lit2">고객센터</span>
          </div>
        </div>
        <div class="k">
         <div class="list">
            <span class="imgg"></span>
            <span class="list2">카테고리</span>
            <span class="list3">샐드밀소개</span>
            <span class="list4">베스트</span>
            <span class="list5">샐러드</span>
            <span class="list6">포케</span>
            <span class="list7">이벤트</span>
         </div>
        </div>
    </div>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
</body>
</html>
 

이 질문에 댓글 쓰기 :

답변 2


<html>
<style>
    body{
         margin: 0px;
        }
    .title{
        position: relative;
        top: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* position: fixed; */
        top:0px;
        background-color: white;
 
    }
    .sale{
        box-sizing: border-box;
        width: 100%;
        background-color: #73864f;
        text-align: center;
        height: 35px;
 
    }
    .text{
        box-sizing: border-box;
        height: 35px;
        margin: 0px;
        padding-top: 9px;
        padding-bottom: 9px;
        color: white;
        font-size: 13px;
    }
    .name{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding-right: 150px;
        padding-left: 150px;
        margin-top: 10px;
       
    }
    .logo{
        box-sizing: border-box;
        width: 250px;
        height: 70px;
        background-image: url(./salad.jpg);
        background-size: 70px 70px;
        background-repeat: no-repeat;
        background-position: left;
        padding-bottom: 12px;
        padding-top: 12px;
        padding-left: 80px;
}
       
       .logo1{
        box-sizing: border-box;
        margin: 0px;
        width: 170px;
        color: #73864f;
        font-size: 28px;
       }
       .logo2{
        box-sizing: border-box;
        margin: 0px;
        width: 170px;
        font-size: 12px;
        text-align: center;
        padding-right: 15px;
        color: #73864f;
       }
       .lit{
        display: flex;
       }
       .lit2{
        box-sizing: border-box;
        width: 63px;
        height: 70px;
        padding: 23px 0px;
        text-align: center;
        color: gray;
        font-size: 12px;
       }
       .lit2:hover{
        color:#73864f;
       }
       .k{
       width: 100%;
       background-color: white;
       position: sticky;
       top: 0px;
       z-index: 100;
       }
    .list{
        display: flex;
        width: 750px;
        justify-content: space-around;
        box-sizing: border-box;
        padding-left: 150px;
        margin-top: 20px;
        background-color: white;
       
    }
    .imgg{
        width: 20px;
        height: 20px;
        background-image: url(./bar.png);
        background-repeat: no-repeat;
        background-size: contain;
       }
       .list2{
        display: block;
        box-sizing: border-box;
        width: 72px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list3{
        display: block;
        box-sizing: border-box;
        width: 90px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list4{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list5{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list6{
        display: block;
        box-sizing: border-box;
        width: 41px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
       .list7{
        display: block;
        box-sizing: border-box;
        width: 58px;
        height: 24px;
        text-align: center;
        font-size: 17px;
       }
 
   
</style>
<body>
    <div class="title">
        <div class="sale">
           <p class="text">지금 가입하면 3만원 쿠폰팩 지급!</p>
        </div>
        <div class="name">
          <div class="logo">
              <h3 class="logo1">SALADMEAL</h3>
              <p class="logo2">salad & mealkit</p>
          </div>
          <div class="lit">
              <span class="lit2">로그인</span>
              <span class="lit2">회원가입</span>
              <span class="lit2">주문내역</span>
              <span class="lit2">고객센터</span>
          </div>
        </div>
        <div class="k">
         <div class="list">
            <span class="imgg"></span>
            <span class="list2">카테고리</span>
            <span class="list3">샐드밀소개</span>
            <span class="list4">베스트</span>
            <span class="list5">샐러드</span>
            <span class="list6">포케</span>
            <span class="list7">이벤트</span>
         </div>
        </div>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
<P>1</P>
    </div>
</body>
</html>

감사합니다 !! 문제가 해결되었어요 ㅠㅠ 그럼 부모 태그에  height을 정의 안 해도 해당 요소에 sticky 위치와 z-index 만 정의하면 작동  되는 걸까요..?

답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT