CSS makes the child container exceed the parent element (the child container floats in the parent container)

Preface

Sometimes, we need a floating effect requirement like the following figure:

accomplish

In standard, normal situations, this can only be accomplished using絕對定位.

Step 1: Set the parent container positioning to relative.

Step 2: Set the subcontainer positioning to absolute.

<div id="a">
   <div id="b">I want to float out! </div>
</div>

#a{
  width:400px;
  height:100px;
  background:rgb(0, 0, 0);
  position:relative;/*Parent element>relative positioning*/
}

#b{
  width: 150px;
  height:50px;
  background:rgb(185, 155, 255);
  position:absolute;/*Sub-element>absolute positioning*/
  top:-30px;/*control floating*/
  /* left:XX; */
}

Effect picture:

The parent element is set to絕對定位, and the child element is set to相對定位, that is, the child element is positioned according to the parent element.

Note: Only child elements will be out of the document flow. The parent element is relatively positioned and will not be out of the document flow, so it will not cause page misalignment.

This concludes this article about how to use CSS to make child containers extend beyond parent elements (the effect of child containers floating in parent containers). For more information about how to use CSS to make child containers extend beyond parent elements, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!