<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> *{margin:0px; padding :0px; padding:0px; } .a{ width: 300px; height: 300px; background-color: red; /* Relative position */ /* Relative position */ /* relative position */ /* the origin of the coordinates is the upper left corner of the initial position */ position: relative; /* left:40px; /* left:40px; /* If the value is positive */ top:40px; /* Fixed position */ /* Fixed position element does not occupy position */ /* the origin of the coordinates is the upper left corner of the body */ position:fixed; left:0; top:0; } .b{ width: 300px; height: 300px; background-color: blue; } .a p{ width: 100px; height: 50px; background-color: yellow; /* Absolute position */ /* Absolute position element does not occupy space */ /* the origin of coordinates, first look up to see if the parent uses relative position, if the parent uses relative position, then the origin of coordinates is the upper left corner of the parent, */ /* The upper left corner of the body if not used */ position:absolute; left:0px; top:0px; } </style> </head> <body> <div class="a"> <p>hello world</p> </div> <div class="b"></div> </body> </html>Copy the code