position:fixed

position:fixed 块级化后可设置margin 相对于自己的偏移量,与top left 叠加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
             * {
                margin: 0;
                padding: 0;
                background-color: rgba(0,0,0,.1);
             }
             
             .father {
                width: 400px;
                height: 400px;
                margin-left: 100px;
                position: relative;
             }
             
             
             .son{
                width: 100px;
                height: 100px;
                position: fixed;
                
                margin-left:300px;
                margin-top: 100px;
                
                left: 200px;
             }
             
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">box</div>
        </div>
        
        <br />

        <br />
        <br />
        
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />  
    </body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容