요소가 요소 외부에 배치되었습니다.

Question

프레젠테이션을 위해 슬라이드에 텍스트, 이미지 등을 삽입하는 HTML DOM 슬라이드 쇼 작성자를 만들려고합니다. 주요 브라우저는 Nintendo DSi 및 3DS 브라우저이지만 컴퓨터와 함께 기능을 원합니다. 즉 CSS 비율을 사용하고 있습니다.

하지만 여기 잡기가 있습니다. HTML span 요소의 상대 위치가 상위 100 %이고 왼쪽이 90 %입니다.

왼쪽 위치는 괜찮습니다. 최상위 위치는 아닙니다 ... 왜 그런지는 모르겠지만, 스팬이 맨 위 위치에서 요소 외부로 완전히 표시됩니다.

직접 확인하십시오 here.

"슬라이드 1"은 밝은 회색 부분의 아래쪽 테두리보다 위에 있어야합니다. 포지셔닝이 해당 div에 상대적이어야하는 이유는 무엇입니까?

저는 항상 CSS 포지셔닝과 혼동을 느낍니다 ... 누군가 나를 알아챌 수 있을까요? 이것은 실망하고 있습니다. 그건 그렇고, 당신이 찾고있는 것은 HTML div 밖에서 "Slide 1"입니다.

Answer 1

정확히 top: 100% 때문에 "요소의 바깥쪽에 완전히 표시됩니다." 그것은 콘테이너의 높이에서 콘테이너의 높이의 100 %를 이동하는 것입니다. 콘테이너의 상단에서 시작 되었기 때문에 콘테이너의 바로 아래를 지나치게 놓을 것입니다. spanrelative 위치 지정은 명시된대로 "div와 관련이 없으며"실제로는 span (you may want to do some reading on that)과 관련됩니다. 그러나 백분율 오프셋을 사용하면 컨테이너의 크기와 관련하여 오프셋을 계산합니다. 당신의 div.slide 용기 자체 position:relative 때문에

는, 그때 당신이 원하는 것은의 div 당신이하려고하는 바닥에 직접 배치하는 bottom: 0을 당신의 spanposition:absolute과 대신 top 위치를하는 설정하는 것입니다 생각 그것을 바닥에두기. left: 90%을 보관할 수 있습니다.