position sticky 미작동 문제
본문
안녕하세요, 근래 새로운 유형의 홈페이지들을 시도해보고 있습니다.
위 사진의 오른쪽 요소에 position sticky를 쓰려하는데, overflow를 부모 요소에 넣지 않았음에도 이게 미작동하는 문제에 시달리고 있습니다.. flex를 사용해도 sticky가 미작동하나요? 아니면 header를 fixed 시키면 높이를 못잡는걸까요..?? 어떻게 해결하면 좋을지 조언해주시면 감사하겠습니다..ㅠ
<article id="bo_v" style="width:100%">
<div>
<section id="bo_v_info">
<h5 class="sound_only">페이지 정보</h5>
<h5 class="bo_v_title">
<p class="bo_v_tit">제목 텍스트</p>
<p class="bo_v_con">내용 텍스트</p>
<a href="#" class="bo_v_ask">견적문의</a>
</h5>
</section>
<section id="bo_v_atc">
<h5 id="bo_v_atc_title" class="sound_only">본문</h5>
<div id="bo_v_img">(사진링크)</div>
<!-- 본문 내용 시작 { -->
<div id="bo_v_con">
<div class="con1">
<p>추진배경</p>
<p>텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.</p>
</div>
<div class="con2">
<div class="perform">
<p>수행내용</p>
<p>텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.</p>
</div>
<div class="result">
<p>성과 및 기대효과</p>
<p>텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.텍스트가 입력되는 공간입니다.</p>
</div>
</div>
<a href="(목록이동 링크)" class="btn btn_adm list_btn">목록</a>
</div>
<!-- } 본문 내용 끝 -->
</section>
</div>
</article>
#bo_v {background:#fff}
#bo_v > div{display: flex;column-gap: 40px;justify-content: space-between;}
#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}
#bo_v_info {
border: 1px solid #ddd;
order: 2;
width: 30%;
height: fit-content;
border-radius: 10px;
position: sticky;
}
#bo_v_info .bo_v_title { font-size:25px; line-height:35px; color:#333333; padding:35px; text-align:left; word-break:keep-all; }
#bo_v_info .bo_v_title img {margin-bottom: 30px; border-radius: 10px;}
#bo_v_info .bo_v_title > ul {display: none;}
#bo_v_info .bo_v_title .bo_v_cate {display: none;}
#bo_v_info .bo_v_tit {
font-size: 25px;
font-weight: 700;
margin-bottom: 20px;
}
#bo_v_info .bo_v_con {font-size: 17px;margin-bottom: 30px;}
답변 2
https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning
You must specify a threshold with at least one of
top,right,bottom, orleftfor sticky positioning to behave as expected.Otherwise, it will be indistinguishable from relative positioning.
#bo_v_info {
border: 1px solid #ddd;
order: 2;
width: 30%;
height: fit-content;
border-radius: 10px;
position: sticky;
top: 0; /* You must specify */
}
<style>
#bo_v {
background: #fff;
display: flex;
column-gap: 40px;
justify-content: space-between;
position: relative; /* 부모 요소에 position: relative 추가 */
}
#bo_v > div {
display: flex;
column-gap: 40px;
justify-content: space-between;
}
#bo_v_table {
position: absolute;
top: 0;
right: 16px;
margin: 0;
padding: 0 5px;
height: 25px;
background: #ff3061;
color: #fff;
font-weight: bold;
line-height: 2.2em;
}
#bo_v_info {
border: 1px solid #ddd;
width: 30%;
height: fit-content;
border-radius: 10px;
position: sticky;
top: 0; /* 상단에 스티키 */
z-index: 1; /* 다른 요소 위에 나타나도록 설정 */
}
#bo_v_info .bo_v_title {
font-size: 25px;
line-height: 35px;
color: #333333;
padding: 35px;
text-align: left;
word-break: keep-all;
}
#bo_v_info .bo_v_title img {
margin-bottom: 30px;
border-radius: 10px;
}
#bo_v_info .bo_v_title > ul {
display: none;
}
#bo_v_info .bo_v_title .bo_v_cate {
display: none;
}
#bo_v_info .bo_v_tit {
font-size: 25px;
font-weight: 700;
margin-bottom: 20px;
}
#bo_v_info .bo_v_con {
font-size: 17px;
margin-bottom: 30px;
}
</style>
답변을 작성하시기 전에 로그인 해주세요.
