How to set the bottom of CSS div

This article mainly introduces "how to set up CSS div". In daily operation, I believe many people have doubts about how to set up CSS div. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to set up CSS div"! Next, please follow the editor to study!

1. Css div instance description

To observe the effect, we set the width of the large box DIV to 400px and the height to 300px, setting a red border style. There are two small boxes with a width of 50px, a height of 100px and a height of 150px. the background color of CSS is blue.

At the same time, the big box is named "." and the two small boxes are named ".diva" and ".divb" respectively by CSS.

2. Complete HTML source code for div css instance:

Online demonstration of DIVCSS5. {position:relative;width:400px;height:300px;border:1px solid # F00} .diva {position:absolute;width:50px;height:100px;bottom:0;left:120px;background:#00F} .divb {position:absolute;width:50px;height:150px;bottom:0;left:180px;background:#00F} for small and medium-sized div instances in large div

The commonly used method of absolute positioning is to set position:relative on the parent div and position:absolute on the child div, and then set left or right, top or bottom on the child div to locate any position in the parent. To learn more about position, you can enter the css position tutorial.

Use position:relative for the parent through the above css div case, set position:absolute for the child at the same time, and use bottom:0 (zero down distance) to position the child close to the bottom edge of the parent. At the same time, use left to adjust the child positioning to the left.

3. Screenshot of div+Css instance effect

Css+div instance A small div resides on the bottom edge of a large div and is close to the bottom effect screenshot.

This example is also a typical example of absolute positioning. Through this example, you can also master the absolute positioning method. First, what style is set by the parent and what style is set by the child, and the child locates the child anywhere within the parent by setting left or right and top or bottom.

At this point, the study on "how to set up CSS div" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!