html和css相对定位和绝对定位的详解

最新推荐文章于 2024-04-03 00:42:56 发布

_阿锋丶

最新推荐文章于 2024-04-03 00:42:56 发布

阅读量149

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/99706675

版权

html css 专栏收录该内容

29 篇文章 18 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    .box1{
        width:200px;
        height:200px;
        background-color:greenyellow;


    }
    .box2{
        width:200px;
        height:200px;
        background-color:yellow;
        /* 
        定位：
        将指定元素定义到任意位置
        通过定位可以任意摆放任何元素
        通过position属性来设置元素的定位
        可选值：
        static：默认值：元素没有开启定位
        relative:开启元素的相对定位
        absolute：开启元素的绝对定位
        fixed:开启元素的固定定位（也是
        绝对定位的一种
        

        相对定位：
        1.当开启了元素的相对定位不设置偏移量时
        不发生任何变化
        2,相对定位是相对文档流中原来的位置定位
        3,相对定位的元素不会脱离文档流
        4，相对定位会使元素提升一个层级
        5，相对定位不会改变元素的性质




         */
        position:relative;
        /* 
        当元素开启了定位时（position属性是一个非static）
        可以通过left,right,top,bottom设置相对位置的
        偏移量;


        通常偏移量只是用两个
        一般选择水平方向的偏移量，和
        垂直方向上.（可以用负号）
         */
         left:200px;
    }
    .box3{
        width:200px;
        height:200px;
        background-color:green;
        /* 
        绝对定位：
        1.绝对定位脱离文档流
        2，开启绝对定位以后，如果不设置偏移量，元素
        不会发生变化
        3,绝对定位相对于页面的最左上角
        4，绝对定位是相当于离他最近的
        开启了定位的祖先元素进行定位的
        5，如果所有元素都没有开启定位
        则相对于窗口左上角定位
        （一般情况下开启了子元素的绝对
        定位，就会同时开启父元素的相对定位
        6，绝对定位会使元素提升一个层级，改变元素的性质
        内联元素变成块元素
        块元素的宽度和高度都被默认内容撑开
         */
         
         position:absolute;
         left:200px;

    }
    .box4{
        width:200px;
        height:200px;
        background-color:blue;
        /* 
        固定定位：
        1，固定定位也是一种绝对定位
        2，它的大部份特点都和绝对定位一样
        3，固定定位永远都相对于浏览器窗口定位
        4，不随滚动条而滚动，永远固定在窗口的某个位置
        5，IE: 6不支持固定定位
        
         */

    }
    
    
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 快捷键 div.box$*3 加tab键 -->
    <div class="box1"></div>
    
        <div class="box4"></div>
        <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>