CSS에서 요소가 상위 요소를 초과하도록 만드는 방법

요소가 상위 요소를 초과하도록 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视频教程】
父元素设置 绝对定位 ，子元素设置 相对定位

1단계: 상위 컨테이너 위치 지정 상대적

으로 설정되어 있습니다.

2단계: 하위 컨테이너 위치를 절대(절대 위치)

로 설정합니다.

rrreeerrreee렌더링: 상위 요소 설정 절대 위치 지정의 경우 하위 요소는 상대 위치 지정으로 설정됩니다. 즉, 하위 요소가 상위 요소에 따라 위치가 지정됩니다. 🎜🎜🎜참고: 하위 요소만 문서 흐름에서 벗어날 수 있습니다. 상위 요소는 상대적으로 위치하며 문서 흐름에서 벗어나지 않으므로 페이지 위치가 이탈되지 않습니다. 🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 CSS에서 요소가 상위 요소를 초과하도록 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!