요소가 상위 요소를 초과하도록 CSS를 구현하는 방법: 1. 상위 컨테이너의 위치를 "상대적"으로 설정합니다. 이는 상대 위치를 의미합니다. 2. 하위 컨테이너의 위치를 "절대"로 설정합니다. 포지셔닝.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS는 자식 컨테이너가 부모 요소를 초과하게 만듭니다(자식 컨테이너는 부모 컨테이너 효과에서 정지됩니다)
때로는 다음 그림과 같은 정지 효과가 필요합니다.
표준 및 일반적인 상황에서는 절대 위치 지정
을 통해서만 수행할 수 있습니다. 绝对定位
来完成。
第一步:父容器定位设置为 relative(相对定位)。
第二步:子容器定位设置为 absolute(绝对定位)。
<p id="a"> <p id="b">我要浮出去!</p></p>
#a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相对定位*/}#b{ width: 150px; height:50px; background:rgb(185, 155, 255); position:absolute;/*子元素>绝对定位*/ top:-30px;/*控制浮出*/ /* left:XX; */}
效果图:
【推荐学习:css视频教程】
父元素设置 绝对定位
,子元素设置 相对定位
으로 설정되어 있습니다.rrreeerrreee렌더링: 🎜🎜🎜참고: 하위 요소만 문서 흐름에서 벗어날 수 있습니다. 상위 요소는 상대적으로 위치하며 문서 흐름에서 벗어나지 않으므로 페이지 위치가 이탈되지 않습니다. 🎜🎜🎜🎜🎜🎜🎜🎜2단계: 하위 컨테이너 위치를 절대(절대 위치)
로 설정합니다.
위 내용은 CSS에서 요소가 상위 요소를 초과하도록 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!