定位练习

作者: Dxes | 来源:发表于2019-12-06 21:03 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--=========================1.定位练习=========================-->
        <style type="text/css">
            #div1{
                position: absolute;
                top: 100px;
                left: 100px;
            }
            
            #div2{
                position: absolute;
                bottom: 20px;
                left: 20px;
            }
            
            #div3{
                position: absolute;
                bottom: 20px;
                right: 20px;
            }
            
            #div4{
                position: absolute;
                bottom: 20px;
                right: 20px;
            }
            
        </style>
        <div id="div1" style="background-color: blue; width: 400px; height: 400px;">
            <div id="div2" style="background-color: deeppink; width: 100px; height: 100px;"></div>
            <div id="div3" style="background-color: deeppink; width: 100px; height: 100px;"></div>
        </div>
        
        <div id="div4" style="background-color: deeppink; width: 100px; height: 100px;"></div>
        
        
    </body>
</html>