절대 위치 지정된 자식에서 너비를 정의하면 비정상적인 동작이 발생하지 않는 이유는 무엇입니까?

Question

기본적으로 상대 컨테이너에는 3 개의 절대 위치 요소가 있습니다. 그 중 하나는 left: 100% (다음에 오는 것)이고 하나는 left: -100% (이전 그림)입니다. transition 속성을 사용하여 사용 가능한 장소 사이를 자동으로 전환합니다. 이것의 최종 결과는 here입니다.

<div id="slideshow"> 
    <article> 
     <img> 
    </article><article> 
     <img> 
    </article><article> 
     <img> 
    </article> 
</div> 
<style> 
    div#slideshow { position: relative; overflow: hidden } 
    img    { width: 100%; height: auto } 
    article   { width: 100%; position: absolute; transition: left 1s } 
    article.current { left: 0 } 
    article.prev { left: -100% } 
    article.next { left: 100% } 
</style> 

(This 슬라이드 쇼가 어떻게 작동하는지 볼 수있는 적용 overflow: hidden없는 결과입니다.)

당신이 볼 수 있듯이, <img>의 자신의 부모, <article>에 반응한다. 블록 요소가 항상 사용 가능한 너비를 차지한다는 것을 알고 있으므로 상태를 지정해야한다고 생각하지는 않지만 보시다시피 <article>에 width: 100%을 지정해야했습니다. 내가하지 않으면 어떻게 될까? Something interesting, I'd say.

.prev<img>은 다른 크기보다 두 배 커지고 .next<img>은 0x0 크기로 렌더링됩니다. 뭐? 모든 이미지의 너비가 100 %이고 높이가 같아야합니다.

내가 알고 싶었던 것은; CSS가 왜 그렇게 작동합니까? 이 결과가 예상치 못한 결과를 낳았 기 때문에 실제로 결과가 반환되는 이유에 대한 토론이 필요했기 때문에 CSS 값의 기본 구성 요소가 실제로 어떻게 작동하는지 더 잘 이해할 수있었습니다.

Answer 1

문제는 이미지 자체가 아니라 기사에 있습니다.

크기를 결정하는 것은 기사 요소이며 이미지는 크기를 가져옵니다.

기사의 너비가 설정되지 않았습니다. 그게 없으며 왼쪽에 문이 있으면 의 값이 0px로 가정됩니다. 왼쪽을 0으로하면 왼쪽은 -100 %, 오른쪽은 100 %, 왼쪽은 100 %, 너비는 0입니다.

어떻게 해결할 수 있습니까? ?

1. 너비 : 기사에 100 %를 추가하십시오. - 직접적인 해결책.
2. left 속성을 사용하여 기사를 이동하는 대신 변형을 사용하십시오. translateX (-100 %); 왼쪽으로 바뀌면 문제가 발생하지 않으며 더 효과적입니다.