position:fixed를 요소에 적용하면 display:flex에 의해 제어되는 콘텐츠의 정렬이 중단됩니다.
<p>필요해요. 말과. 페이지를 스크롤할 때 선 요소는 뷰포트 상단, 즉 선이 단어 아래에 있는 원래 위치에 고정됩니다. <br /><br />수정했습니다. 단어와 위치: 끈적하지만 두 가지 문제에 직면합니다:<br /></p><p><code></code><code></code></p>
끈적 끈적한 . 라인이 단어 위로 "점프"하고 뷰포트 상단에 고정하는 방법을 모르지만 강제로 거기에 머물도록 합니다. 단어 요소 아래의 끈적임은 처음에는 올바른 값이 아니었습니다. 스크롤을 시작하면 텍스트가 "흔들"었습니다. 올바른 값은 고정되어 있습니다. 훌륭하게 작동하고 사용하고 싶지만 작동이 중단됩니다. 경고 클래스 위치(빨간색 글꼴): 있어야 합니다. 전사 텍스트의 반대(수평)이지만 이 두 클래스의 텍스트를 함께 축소하는 고정 값입니다. <br /><p><br /></p><p>여기에도 이 "상황"이 있는 JS Bin이 있습니다.
-
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
위치: 끈적끈적함;
상단: 0;
Z-색인: 1;
배경색: 흰색;
}
.단어 {
패딩: 1vw 3vw 2% 3vw;
}
.단어-세부사항 {
디스플레이: 플렉스;
내용 정당화: 공백 사이;
항목 정렬: 기준선;
}
.전사 {
글꼴 두께: 보통;
}
.경고 {
색상: 빨간색;
여백 왼쪽: 자동;
}
.선 {
테두리 상단: 2px 솔리드 #fdb239;
}
.의미 {
목록 스타일 유형: 없음;
카운터 재설정: 항목;
하이픈: 자동;
글꼴 크기: calc(0.7em + 1.5vw);
}
.의미 >
위치: 상대;
}
.의미 >
내용: 카운터(항목);
카운터 증가: 항목;
위치: 절대;
상단: 0;
텍스트 정렬: 중앙;
왼쪽 여백: calc(-0.7em - 2.5vw);
}
.의미 단어 {
여백 상단: 50px;
}
.문장 {
목록 스타일 유형: 없음;
왼쪽 패딩: 0;
글꼴 크기: calc(0.7em + 1.5vw);
여백 상단: 30px;
}
.문장 > li.sentence-ru {
여백 상단: 15px;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<본문>
<div class="단어">
단어
<div class="word-details">
<div class="transcription">/ 전사 /</div>
<div class="warning">COMMENT</div>
</div>
</div>
<hr class="line">
<ol class="의미">
<li class="meaning-word">의미1</li>
<ul class="문장">
<li class="sentence-en">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum</li>
<li class="sentence-ru">대중적인 믿음과는 달리 Lorem Ipsum은 단순한 임의의 텍스트가 아닙니다. 이 작품은 기원전 45년의 고전 라틴 문학에 뿌리를 두고 있으며 그 역사가 2000년이 넘었습니다. 버지니아주 Hampden-Sydney 대학의 라틴어 교수인 Richard McClintock은 Lorem Ipsum의 구절에서 좀 더 모호한 라틴어 단어 중 하나인 consectetur를 찾아보고 고전 문학에서 그 단어가 인용된 곳을 샅샅이 뒤져 의심할 여지가 없는 출처를 발견했습니다. Lorem Ipsum은 기원전 45년에 작성된 Cicero의 "de Finibus Bonorum et Malorum"(선과 악의 극단)의 섹션 1.10.32 및 1.10.33에서 유래되었습니다. 이 책은 르네상스 시대에 매우 인기가 있었던 윤리 이론에 관한 논문이다. Lorem Ipsum의 첫 번째 줄인 "Lorem ipsum dolor sit amet.."은 섹션 1.10.32의 줄에서 유래되었습니다.</li>
</ul>
<li class="meaning-word">의미2</li>
<ul class="문장">
<li class="sentence-en">Lorem Ipsum은 인쇄 및 조판 업계의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명 인쇄업자가 활자 갤리를 가져와 활자 견본 책을 만들기 위해 뒤섞인 이후 업계 표준 더미 텍스트였습니다. 그것은 5세기 동안 살아남았을 뿐만 아니라 전자 조판으로의 도약에도 불구하고 본질적으로 변하지 않은 채로 남아 있습니다. 1960년대 Lorem Ipsum 구절이 포함된 Letraset 시트가 출시되면서 대중화되었으며, 최근에는 Lorem Ipsum</li>
</ul>
</ol>
</body>
</html></pre>
<p><br /></p>
