HTML入门（定位方式）————DAY4_对元素在原有位置的基础上进行一些微调要用什么定位-CSDN博客

<html>
    <head>
        <meta charset="utf-8">
        <title>定位方式</title>
        <style>
            /* body{
                position: relative;
            } */
            .pink{
                height: 100px;
                width: 200px;
            }
            .box{
                width: 100px;
                height: 100px;
            }
            #d1{
                background-color: red;
            }
            #d2{
                background-color: green;
                /* position样式，表示元素的定位方式 */
                /* static表示静态定位，只参与流式布局，不能设置位置，一个元素默认的定位方式就是static */
                /* position: static; */

                /* relative，相对定位，相对定位的元素，参与流式布局，而且可以通过top,left,bottom,right样式设置位置。相对于本身在流文档中原有的位置进行定位。 */
                position: relative;
                left: 20px;
                top: 20px;
            }
            #d3{
                background-color: blue;
            }

            #container{
                background-color: #dddddd;
                margin-top: 20px;
                /* height: 150px; */
                width: 500px;
                position: relative;
            }

            #d4{
                background-color: pink;

                /* absolute:绝对定位，绝对定位的元素会脱离文档流，不参与流式布局，所以在它父元素的文档流中就没有它的位置。绝对定位的元素也可以使用top,left等进行位置调整 */

                /* absolute定位的元素，相对于离自己最近的position为非static的上层元素进行定位。 */

                /* absolute定位的元素，先查看自己父元素的定位是否为static，如果不是，则相对于父元素定位，如果是，则查看父元素的父元素是否为static，一直找到根元素（html）为止。 */

                /* 所以，如果想要让一个元素相对于自己的父元素进行定位，那么将父元素的position设置为非static即可（一般设置为relative，relative不会破坏父元素原有的流式布局） */
                position: absolute;
                right: 0;
                top: 0;
            }
            #d5{
                background-color: purple;
            }

            #d6{
                width: 300px;
                height: 150px;
                background-color: cyan;

                /* fixed，固定定位。固定定位的元素会脱离文档流，不参与流式布局。也可以通过left,top等设置位置 。fixed定位的元素总是相对于根元素进行定位，而且不随页面滚动*/
                position: fixed;
                left: 0;
                top: 20px;
            }
            /* 
                staitc:静态定位，元素默认的定位方式。
                relative:相对定位，当需要对某个元素在原有的位置上进行微调时使用。
                absolute:绝对定位，当需要让一个元素相对于自己的父元素或其他上层元素定位时使用
                fixed:当希望某个元素不随页面滚动时使用
             */

        </style>
    </head>
    <body>
        <div id="d1" class="box"></div>
        <div id="d2" class="box">你好</div>
        <div id="d3" class="box"></div>

        <div id="container">
            <div class="pink" id="d4"></div>
            <div class="box" id="d5"></div>
            <div id="d6"></div>
        </div>

        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>
        <p>撑开页面</p>

        

    </body>
</html>