>  기사  >  웹 프론트엔드  >  CSS에서 요소가 상위 요소를 초과하도록 만드는 방법

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

藏色散人
藏色散人원래의
2021-04-13 10:22:276240검색

요소가 상위 요소를 초과하도록 CSS를 구현하는 방법: 1. 상위 컨테이너의 위치를 ​​"상대적"으로 설정합니다. 이는 상대 위치를 의미합니다. 2. 하위 컨테이너의 위치를 ​​"절대"로 설정합니다. 포지셔닝.

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

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS는 자식 컨테이너가 부모 요소를 초과하게 만듭니다(자식 컨테이너는 부모 컨테이너 효과에서 정지됩니다)

머리말

때로는 다음 그림과 같은 정지 효과가 필요합니다.
CSS에서 요소가 상위 요소를 초과하도록 만드는 방법
CSS에서 요소가 상위 요소를 초과하도록 만드는 방법

구현

표준 및 일반적인 상황에서는 절대 위치 지정을 통해서만 수행할 수 있습니다. 绝对定位 来完成。
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에서 요소가 상위 요소를 초과하도록 만드는 방법

【推荐学习:css视频教程
父元素设置 绝对定位 ,子元素设置 相对定位여기에 이미지 설명 삽입

1단계: 상위 컨테이너 위치 지정 상대적
으로 설정되어 있습니다.

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

로 설정합니다.
rrreeerrreee렌더링: 여기에 이미지 설명 삽입 【 추천 학습: CSS 동영상 튜토리얼]상위 요소 설정 절대 위치 지정의 경우 하위 요소는 상대 위치 지정으로 설정됩니다. 즉, 하위 요소가 상위 요소에 따라 위치가 지정됩니다. 🎜🎜🎜참고: 하위 요소만 문서 흐름에서 벗어날 수 있습니다. 상위 요소는 상대적으로 위치하며 문서 흐름에서 벗어나지 않으므로 페이지 위치가 이탈되지 않습니다. 🎜🎜🎜🎜🎜🎜🎜🎜

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.