sticky 오류 분명 됬었는데 안되요ㅠ
본문
sticky가 되었었는데 몇주후에 다시 들어가보니 안됩니다..
history_fix가 고정되고 history_move가 연혁텍스트 부분입니다
찾아보다가 flex면 안된다고 align-self를 추가해야된다해서 수정했는데도 안됩니다ㅜ
flex를 포기할 수 는 없고,,
어떤 오류일까요 도와주십쇼 고수님들 ㅠㅠ
<section id="sub0102">
<div class="con_title">
<img src="<?php echo G5_IMG_URL ?>/con_title_icon.png" alt="icon">
<p class="kr">연혁</p>
</div><!-- con_title -->
<section id="sub_sec" class="sub0102_sec sub01_con01">
<div class="history_fix">
<p class="his_article">상하수도 자동화 및 재난 재해 방재 전문 기업</p>
<p class="his_title">SINNOTECH</p>
<p class="his_desc">
오랜 기간 쌓아온 경험과 노하우를 기반으로<br />
기술 개발은 물론 지자체 및 공공기관 적용과<br />
제품의 우수성, 신뢰성 및 안정성을<br />
검증받으며 발전해 나가고 있습니다.
</p>
</div><!-- history_fix -->
<div class="history_move">
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2018</p>
</div>
<ul>
<li>성능인증(인천-20180180-2-01)</li>
<li>조달우수제품지정(제2018174호)</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1500">
<div class="year">
<p>2017</p>
</div>
<ul>
<li>민관공동투자기술개발사업 성공(S2363159)<br />
“현장 맞춤형 무선 원격 감시제어장치 기술개발＂</li>
<li>물관리 우수상 수상(K-water)</li>
<li>K-water 성능검증제품 인증 브랜드 사용 승인</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2016</p>
</div>
<ul>
<li>특허 제101589127호 등록</li>
<li>민관공동투자기술개발사업 성공(S2155127)<br />
"체크밸브 개폐특성 모니터링 및 진단장치 개발"</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2014</p>
</div>
<ul>
<li>기술혁신형 중소기업(INNO-BIZ)인증,벤처기업 재확인</li>
<li>특허 제101459579호 등록</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2013</p>
</div>
<ul>
<li>ISO 9001,14001 인증</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2012</p>
</div>
<ul>
<li>자본금 255백만원 으로 증자</li>
<li>중소기업 중앙회 전산업무개발 직접생산 확인등록</li>
<li>특허 제101171884호 등록</li>
<li>기업 부설 연구소 설립(한국산업기술진흥협회)</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2010</p>
</div>
<ul>
<li>공장등록 (유무선 원격감시제어장치 외)</li>
<li>중소기업 중앙회 계장제어장치,유무선원격제어장치,<br />자동제어반 직접생산 확인등록</li>
<li>정보통신 공사업 등록</li>
<li>벤처기업 확인</li>
<li>소프트웨어 사업자 신고 확인서 발급</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2009</p>
</div>
<ul>
<li>자본금 150백만원 으로 증자</li>
<li>본점이전 (인천광역시 부평구 부평대로 283 B동 911호)</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2008</p>
</div>
<ul>
<li>특허 제100797602호 등록</li>
</ul>
</div><!-- history_con -->
<div class="history_con" data-aos="fade-down" data-aos-duration="1000">
<div class="year">
<p>2006</p>
</div>
<ul>
<li>계장제어장치 제조업 등의 목적으로 “주식회사 씨노텍” 설립</li>
</ul>
</div><!-- history_con -->
</div>
</section>
</section>
#sub0102 {width: 1400px; margin: 0 auto;}
#sub0102 .sub01_con01 {display: flex; flex-wrap: wrap; position: relative;}
#sub0102 .history_fix {width: 50%; height:1000px; background: url('../img/sub0102_bg.png') no-repeat center center; padding-top: 222px; position: sticky; top: 0; left: 0; align-self: flex-start;}
#sub0102 .history_fix .his_article {font-size: 22px; font-weight: 500;}
#sub0102 .history_fix .his_title {font-size: 68px; font-weight: 700; font-family: 'Roboto'; margin-bottom: 38px;}
#sub0102 .history_fix .his_desc {font-size: 18px; color: var(--back-color); line-height: 28px;}
#sub0102 .history_move {width: 50%;}
#sub0102 .history_move .history_con {display: flex; flex-wrap: wrap; gap: 60px; padding-bottom: 28px; border-bottom: 1px dashed #aeaeae; margin-bottom: 35px;}
#sub0102 .history_move .history_con .year p {font-size: 28px; font-weight: 700;}
#sub0102 .history_move .history_con ul {padding-top: 3px;}
#sub0102 .history_move .history_con ul li {font-size: 18px; margin-bottom: 15px; line-height: 26px;}
#sub0102 .con_title, #sub0103 .con_title {margin-bottom: 30px;}
답변 3
#wrapper에 overflow:hidden 제거하세요
sticky는 해당 요소를 포함하는 모든 부모 요소에서 overflow:hidden이 있으면 안됩니다
바로 위 부모만 해당되는줄알았는데..감사합니다!!
안녕하세요.
혹시 브라우져 > 개발자 모드 > 콘솔에 어떤 오류들이 나오는지요?
무조건 안된다 하면
저희가 어디가 잘못되었는지 어떻게 알까요..
적어도 원래 이랬는데 지금은 이렇다.. 라던지
객관적인 현재 상태를 알려주셔야 합니다.
그리고 절대적으로 잘되었다가 갑자기 안되는 경우는
'어딘가를 손 대서' 입니다.
수정전 백업본이 있다면 해당 부분을 롤백하시고 채크해보세요.
그리고 본인이 어디가 문제인지 모르겠으면
적어도 URL 은 공개해주세요.
답변을 작성하시기 전에 로그인 해주세요.
