【实习第九天】css定位_css定位实验报告实验步骤-CSDN博客

本文链接：https://blog.csdn.net/weixin_48000103/article/details/128085885

1.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 布局方式：文档流、浮动、定位 -->
    <!-- 定位：是一种布局手段，而且它是一种高级的布局手段，可以将页面中的任何元素放在页面中的任意位置
        通过position属性进行设置
            可选值：
                static    默认值   不开启定位

                以下四种都属于开启定位
                relative  开启相对定位
                absolute  开启绝对定位
                fixed     开启固定定位
                sticky    开启粘滞定位


            掌握定位：如何开启、开启后的特点
            1、相对定位
            使用position：relative;开启
            特点：
              1、开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化
              2、相对定位，是相对于元素原来在文档流中的位置定位
              3、开启了相对定位后，元素的层级会变高，也就是会盖住其他元素
              4、开启了相对定位后，元素的性质不会发生变化，块就是块，行内还是行内
    -->

    <!-- 偏移量   相对于定位位置挪动的大小的值
            left    相对于定位位置左侧的偏移量
            right   相对于定位位置右侧的偏移量
            top     相对于定位位置上侧的偏移量
            bottom  相对于定位位置下侧的偏移量

            一般情况下，设置偏移量，
                水平方向，left或right调动一个值
                垂直方向，top或bottom调动一个值
              
    
    -->
    <style>
        .box{
            width: 600px;
            height: 600px;
            border: 3px solid black;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 开启相对定位 */
            position: relative;
            left: 200px;
            top: -200px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <div class="box3">

        </div>
    </div>
</body>
</html>

2.绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        绝对定位：
            如何开启
                position：absolute
            开启后特点：
                1、开启了绝对定位，如果不配合偏移量使用，元素的位置不会发生变化
                2、开启了绝对定位，元素会脱离文档流，下面的元素就会跑上去
                3、开启了绝对定位，元素会脱离文档流，元素的性质就会发生变化，不再区分块还是行内还是行内块，也就是块元素不会独占一行了，行内元素可以设置宽高了
                4、绝对定位的原点，是相对于其包含块来确定的
                一般情况下，如果设置子元素为绝对定位，我们会同时设置其父元素相对定位，以便设置偏移量，这种情况叫“子绝父相”，但最终还是要根据如何方便设置子元素偏移量为准。
                5、开启了绝对定位，元素会提升一个等级
     -->

     <!-- 包含块：
            1、在没有定位的情况下，其包含块就是其父元素或者祖先元素
            2、在开启了定位的情况下，其包含块就是离它最近开启了定位的祖先元素，如果其祖先元素都没有开启定位，包含块就是根元素（html标签）
    
    -->
     <style>
        .box{
            width: 600px;
            height: 600px;
            border: 3px solid black;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .box2{
            width: 250px;
            height: 250px;
            background-color: red;
        }

        /* span{
            background-color: pink;
            width: 100px;
            height: 100px;
            position: absolute;
        } */
     </style>
</head>
<body>
    <div class="box">
        <div class="box1">

        </div>
        <div class="box2">

        </div>
        <!-- <span>
            举快韩
        </span> -->
    </div>
</body>
</html>

3.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        固定定位
          如何开启 
            position：fixed；
          开启后的特点
          1、开启固定定位后，元素会脱离文档流，元素的性质会发生改变
          2、开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而改变
          3、开启固定定位后，也需要配合偏移量，来改变元素在页面中位置
          4、固定定位的原点一直是html根标签，也就是浏览器视口
        
        常用的场景
         1、固定的侧边导航
         2、固定的广告
         3、固定的顶部、底部导航
     -->

     <style>
        .outer{
            width: 600px;
            height: 600px;
            border: 2px black solid;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: fixed;
            right: 0;
            bottom: 45%;
        }
     </style>
</head>
<body>
    <div class="outer">
        <div class="box1">
            我过太使的准者得乐。
        </div>
    </div>
</body>
</html>

4.粘滞定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    粘滞定位
      如何开启
        position：sticky；
      开启之后的特点
      1、开启粘滞定位，元素的性质不会脱离文档流，也就是元素性质也不会发生改变
      2、开启粘滞定位后，元素位置不发生变化，需要配合偏移量使用，一般情况下，是配合top值使用，在没有到达top值之前，元素是随着滚动条而滚动，到达top值之后，元素就不会随着滚动条而滚动
      3、粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容到ie9以上
      4、粘滞定位的原点也是浏览器视口，也就是html根标签
      
      主要的应用场景
 -->
 <style>
    ul{
        width: 800px;
        height: 50px;
        line-height: 50px;
        background-color: pink;
        /* 开启粘滞定位 */
        position: sticky;
        top: 0px;
    }

    ul>li{
        float: left;
        width: 15%;
        text-align: center;
    }

    li:hover{
        background-color: green;
    }
 </style>
<body style="height: 6000px;">
    <ul>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
    </ul>
    <div>
        俭此才恨者徒仃领洪无临我，光起案有，选。
    </div>
</body>
</html>

5.绝对定位元素布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: palegreen;
            border: 10px red solid;
            position: relative;
        }

        .box2{
            width: auto;
            height: 100px;
            background-color: orange;
            /* 面试题：让元素水平垂直居中，请你列举几种方式 */
            /* 第一种方式：
            元素会水平垂直居中
            前提在绝对定位的情况下，四个方向偏移量以及元素的内容宽高都是固定值
            让margin为auto
             */
            position: absolute;
            margin:  0;
            left: auto;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
    <!-- 
        在定位的情况下，元素的水平方向增加了两个值，从原来的7个值变为9个值，但依然遵循过度约束的原则，即水平方向9个值相加必须要等于父元素内容区的宽度，如果不等于的话，浏览器就会进行约束调整：
        过度约束：
        left
        margin-left border-left padding-left 
        width
        padding-right border-right margin-right
        right
        0 0 0 0 100 0 0 0 0 =400
        如何调整：
        1、如果9个值中没有auto，调整的就是right
        2、如果有auto，9个值当中，有left，margin，width，right 4个值可以设置auto
            1、1个auto
                left margin width right 中设一个auto，其它的值为固定值
                浏览器就调整这个auto
            2、2个auto
                left margin  调整left
                left width   调整left
                left right   调整right
                margin width 调整width
                margin right 调整right
                width right  调整right
            3、3个auto
            left  margin  width     调整的就是left
            left  margin  right     调整的就是right
            margin width  right     调整的就是right
            4、4个auto
            left margin width right  调整的就是right

        总结：
        1、如果9个值当中，没有auto，调整的就是right
        2、如果9个值当中，有auto，调整的顺序
            right>left>width>margin
        3、在绝对定位的情况，如果right，left，top，bottom，width为固定值
            margin为auto，元素就会水平垂直居中
     -->
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>
</body>
</html>