html 之 position定位方式

最新推荐文章于 2024-06-19 17:44:34 发布

又一个包子

最新推荐文章于 2024-06-19 17:44:34 发布

阅读量835

点赞数

分类专栏： html基本知识

本文链接：https://blog.csdn.net/whpu1234/article/details/81300849

版权

html基本知识专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1.三种定位方式 position：定位方式。默认值是static,表示静态定位，不能使用top、left这些改变它的位置
1）绝对定位：postion:absolute; 绝对定位，绝对定位的元素会脱离文档流，脱离页面排版
（不再拥有自己的位置，原来的位置也会被后面的元素占用）
01.绝对定位的元素，首先会看父元素是不是static定位，如果不是static，
那么该元素就会相对于自己的父元素进行定位，
02.如果是static，就查看父元素的父元素是否为static，如果不是static，
就相对于自己的父元素的父元素进行定位，
03.如果是，就继续往上找，一直找到根元素为止。
2）相对定位： relative：相对定位。相对于自身原来的位置进行位置的移动。
可以使用top、left等方向来改变它的位置
3）固定定位：position: fixed; 固定定位，固定定位的元素会脱离文档流，
相对于跟元素进行定位。
最大的特点就是，不会随页面滚动而滚动。

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>


    <style>
    .rect{
        width: 100px;
        height: 100px;
    }

    #red{
        background-color: crimson;
    }

    #green{
        /*position:定位方式。默认值是static，静态定位，不能改变位置*/

        /*relative:相对定位，相对于自己原来的位置可以使用top、left等方向来改变位置*/
        background-color: darkgreen;
        position: relative;
        left: 50px;
        top: 50px;
    }

    #blue{
        background-color: darkblue;
        position: relative;
        left: 400px;
        top: 100px;

    }

/**********************************************************************************/   

    #cont{
        width: 600px;
        margin: 0 auto;
        background-color: chartreuse;
        position: relative;
    }
    #first{
        background-color: bisque;
    }

    #second{
        background-color: black;

        /* position:absolute; 绝对定位，绝对定位的元素会脱离文档流，脱离页面排版
               （不再拥有自己的位置，其原来的位置也会被后面的元素占用）*/
            /* 
                绝对定位的元素，首先会看父元素是不是static定位，如果不是static，那么该元素就会相对于自己的父元素进行定位，
                如果是static，就查看父元素的父元素是否为static，如果不是static，就相对于自己的父元素的父元素进行定位，
                如果是，就继续往上找，一直找到根元素为止。
             */
             /* 如果希望绝对定位元素相对于自己父元素定位，通常情况下，把父元素的position设置为relative即可 */
        position: absolute;
        left: 50px;
        top: 50px;
    }

    #third{
        background-color: blueviolet;
    }

/**********************************************************************************/ 

    #fixed{
        width: 50px;
        height: 50px;
        background-color: cyan;

        /* 
            position: fixed; 固定定位，固定定位的元素会脱离文档流，
            相对于跟元素进行定位。
            最大的特点就是，不会随页面滚动而滚动。
             */
        position: fixed;
        left: 80px;
        top: 80px;
    }
    </style>
</head>
<body>
    
    <div id="red" class="rect"></div>
    <div id="green" class="rect"></div>
    <div id="blue" class="rect"></div>

    <div id="cont">
        <div class="rect" id="first"></div>
        <div class="rect" id="second"></div>
        <div class="rect" id="third"></div>
    </div>

    <div id="fixed"></div>
</html>

运行结果：

又一个包子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 之 position定位方式

1.三种定位方式 position：定位方式。默认值是static,表示静态定位，不能使用top、left这些改变它的位置 1）绝对定位：postion:absolute; 绝对定位，绝对定位的元素会脱离文档流，脱离页面排版（不再拥有自己的位置，原来的位置也会被后面的元素占用） ...
复制链接

扫一扫

专栏目录