Css div positioning

There are many methods to control div definition using css. Let's take a look at the instance code of different methods.

The code is as follows:

Copy code

<Div style = "width: 150px; height: 150px; background: # FF0000; position: relative"> <Div style = "width: 100px; height: 50px; background: #006633; position: absolute; right: 0; bottom: 0"> </div> </Div> <Div style = "width: 150px; height: 150px; background: # FF0000; padding-bottom: 0px; position: relative;"> <Div style = "width: 100px; height: 50px; background: #006633; margin-bottom: 0px; position: absolute; bottom: 0;"> </div> </Div> <Div style = "width: 550px; height: 150px; background: # FF0000;"> <Div style = "width: 100%; height: 100%;"> </div> <Div style = "width: 100px; height: 50px; background: #006633; margin-top:-50px; float: left "> Satan <Br> </div> <Div style = "width: 100px; height: 50px; background: #006633; margin-top:-50px; float: left"> <Br> </div> </Div> <Div style = "width: 150px; height: 150px; background: # FF0000;"> <Div style = "width: 100%; height: 100%;"> </div> <Div style = "width: 100px; height: 50px; background: #006633; margin-top:-50px"> </div> </Div>

Well, there are four methods, but they all share the same meaning,