SIR
이전 목록 다음
채택완료

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

aiai1505150
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 21,546

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

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

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

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

 

Copy 
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>
 
css html
|

답변 2개

채택된 답변
+20 포인트
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

Copy 
<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>
aiai1505150
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

답변을 작성하려면 로그인이 필요합니다.