前端学习第一天position的功能理解和奥运五环的demo。

一条从前端菜鸟到大神的进化史：Day1

今天学习了position,position是绝对定位的意思，一般语法为，position：absolute

absolute:指脱离原来位置进行定位

relatitve:指保留原来位置进行定位。

通过以下例子快速了解position；

（1）创建三个不同尺寸的盒子，div class="wrapper",div class="content",div class="box",并赋予不同样式。具体代码如下：

实现效果

上图是在没有加入位置实现的效果

接下来我让第二个黑盒子带着黄色的小盒子左移，只需要在content样式中加入margin -left:100px;

结果如图

如果我想让黄色盒子移动一样是在wrapper下加入margin-left,以上是relative的用法。

接下来我们讨论absolute

我在第三个黄色小盒子里加入position:absolute;并让它左移50个像素，

很明显的看到，黄色小盒子脱离了以前的位置，

现在我们给其祖父级加上relative

看见黄色的小盒子以橙色大盒子为参考点左移50像素。

总结如下：

absolute相对于父级定位，离自己最近的，如果没有就相对于文档定位

relative保留原来的位置进行定位，相对于自己原来的位置进行定位。

定位一般都需要参考物，一般情况下，我们都用relative作为参考的父级，不用他去定位!

接下来完成了一个奥运五环的编写，代码如下：

   

   

   

    Document

   

        *{padding: 0;

        margin: 0}

.zhong{

    width: 400px;

    margin: 0 auto;

    height: 300px;

    overflow: hidden;

    position: relative;

}

        .yuan1{

            width: 100px;

            height: 100px; 

            border: 8px solid blue;

            border-radius: 50%;

            position: absolute;

            top: 10px;

            left: 10px;

        }

        .yuan2{

            width: 100px;

            height: 100px; 

            border: 8px solid red;

            border-radius: 50%;

            float: left;

            position: absolute;

            top: 10px;

            left: 126px;

        }

        .yuan3{

            width: 100px;

            height: 100px; 

            border: 8px solid black;

            border-radius: 50%;

            float: left;

            position: absolute;

            top: 10px;

            left: 242px;

        }

        .yuan4{

            position: absolute;

            width: 100px;

            height: 100px; 

            border: 8px solid yellow;

            border-radius: 50%;

            position: absolute;

            top: 83px;

            left: 73px;

        }

        .yuan5{

            position: absolute;

            width: 100px;

            height: 100px; 

            border: 8px solid green;

            border-radius: 50%;

            position: absolute;

            top: 83px;

            left: 188px;

        }

   

       

       

       结果如下：

       我大哥说我写出来小心被喷，这么low,但是没关系呀，我希望能学到更多的东西，第一次写，有点凌乱，多多包涵。