Web前端开发-定位类型

最新推荐文章于 2023-12-13 11:40:26 发布

viewerlin

最新推荐文章于 2023-12-13 11:40:26 发布

阅读量1.1k

点赞数

分类专栏： HTML/CSS 文章标签： HTML CSS Web

本文链接：https://blog.csdn.net/viewerlin/article/details/80181602

版权

HTML/CSS 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Web前端开发，自学笔记整理

定位类型

1.绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: lightblue;

                /*定位
                    static: 默认值，没特殊定位 
                    absolute：绝对定位
                    relative：相对定位
                    fixed：固定定位
                */

                /*absolute：绝对定位
                    - 脱离文档流 
                    - 相对于谁(不固定)
                        往上找(包含关系)，找有定位属性的
                        如果都没有，即相对于body
                */
                position: absolute;
                /*距离：lfet、right、top、bottom*/
                /*left: 100px;*/
                right: 50px;
                bottom: 70px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

2.相对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: lightblue;

                /*相对定位
                    - 相对于谁(自己) 
                */
                position: relative;
                right: 30px;
                bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

3.固定定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            .box {
                width: 1000px;
                height: 700px;
                border: 1px solid gray;
                margin: 0 auto;
            }
            .tel {
                width: 30px;
                height: 40px;
                background: lightcoral;
                /*
                固定定位
                    - 相对于整个窗口        
                */
                position: fixed;
                right: 10px;
                bottom: 200px;
                color: white;
                font-size: 13px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

        <div class="tel">返回顶部</div>
    </body>
</html>

viewerlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发-定位类型

Web前端开发，自学笔记整理定位类型1.绝对定位&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绝对定位&lt;/title&gt; &lt;style type="
复制链接

扫一扫