8.css的定位.html

织梦狗教程前端开发

2023-10-27

!DOCTYPE htmlhtmlheadmeta charset=UTF-8title/title/headstyle type=text/css.div1{position: relative;/*相对定位*/left: 200px;top: 50px;}.div2{position: absolute;/*绝对定位*/left: 10...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <style type="text/css">
        
        .div1{
            position: relative;/*相对定位*/
            left: 200px;
            top: 50px;
        }
        
        .div2{
            position: absolute;/*绝对定位*/
            left: 100px;
            top: 50px;
        }
        
        .div3{
            position: fixed;/*固定定位*/
            right: 0px;
            bottom: 0px;
        }
        
    </style>
    
    <body>
        
        <div class="div1"><img src="img/2.jpg"></div>
        
        <div class="div2"><img src="img/qq.jpg"></div>
        
        <div class="div3"><img src="img/ad.png"></div>
        
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        我们正在学习css定位<br/><br/><br/><br/><br/><br/><br/>
        
    </body>
</html>

织梦狗教程

本文标题为：8.css的定位.html