position sticky 질문
본문
sticky 가 안먹고 있는데 왜이러는걸까요...?ㅠㅠ
적용될만한 조건은 다 되는것 같은데 ..도움부탁드립니다
<div class="apt-con__body" style="width: 1440px!important;">
<div class="pt-4 is-flex is-justify-content-space-between is-align-items-center" >
<p class="con_title">제목</p>
<button class="submit_button apt-btn apt-btn__sky5 on is-size-6 ml-2 btnSearch" style="position: sticky; top: 80px; z-index: 100; white-space: nowrap; align-self: flex-start" type="button">자세히보기</button>
</div>
<div class="form-table mt-4 p-0" style="height: 1500px" id="tableDetail">
내용내용
</div>
</div>
답변 4
부모요소 안에서만 작동 합니다
부모요소에 height 가 정해져 있어야 합니다
부모 요소에 overflow 가 설정되어 있으면 안 됩니다
해당만 가지고는 어떤 css가 적용되어 있는지 정확하게 알 수가 없습니다.
개발자 도구로 다른 css로 인해서 적용이 안되고 있나 확인을 해보셔야 할 거 같습니다.
height값을 임의로 설정 후 테스트 한번 해보세요
의도 한 것이 위의 효과 인것 같네요
아래와 같이 하면 위 이미지와 같이 됩니다.
이것이면 채택 좀 부탁 드립니다.
<div class="apt-con__body" style="width: 100% !important; max-width: 100% !important; border: 1px solid red;">
<div class="pt-4 is-flex is-justify-content-space-between is-align-items-center">
<p class="con_title">제목</p>
</div>
<div class="form-table mt-4 p-0" style="height: 1500px" id="tableDetail">
<button class="submit_button apt-btn apt-btn__sky5 on is-size-6 ml-2 btnSearch" style="position: sticky; top: 80px; z-index: 100; white-space: nowrap; align-self: flex-end; float: right;" type="button">자세히보기</button>
내용내용<br><br>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.