CSS 定位

最新推荐文章于 2024-12-04 20:36:57 发布

weixin_33682790

最新推荐文章于 2024-12-04 20:36:57 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whylinux/p/10362153.html

本文详细解析了CSS中的定位属性，包括静态定位、相对定位和绝对定位的概念及应用实例。同时介绍了固定定位的使用场景，如实现返回顶部按钮。通过具体代码示例，帮助读者深入理解并掌握各种定位方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定位

（1）position定位属性；默认值是static，无定位。相对定位：相对于原来的位置来说的。绝对定位：相对于最近的一个被定位过的祖先元素标签

（2）定位示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14定位示例</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        /*让标签定位在一个位置,距离网页的上面和左面各是多少像素的位置    */

        .c1,
        .c2,
        .c3,
        .c4 {
            height: 150px;
            width: 150px;
        }

        .c1 {
            background-color: red;
        }

        /* 相对定位 */
        .c2 {
            background-color: green;
            /*position: static;   !* position属性就是定位相关的，默认值是static *!*/
            position: relative; /* relative表示相对定位，相对于自己原先的位置 */
            left: 400px;
            top: 150px;
        }

        .c3 {
            background-color: blue;
        }

        /* 绝对定位 */
        .c4 {
            background-color: darkcyan;
            position: absolute; /* 绝对定位,相对与被定位过的父标签的位置 */
            top: 150px;
            left: 400px;
        }

    </style>

</head>
<body>


<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
<div class="c2">CC2
    <div class="c4">C4</div>
</div>
</body>
</html>

2.fixed 固定定位（返回顶部按钮通常用这个做）

 /* 固定定位，在界面中，位置不会变化*/
        .fixed-test {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: blueviolet;
        }

<div class="fixed-test">返回顶部</div>

转载于:https://www.cnblogs.com/whylinux/p/10362153.html