一条从前端菜鸟到大神的进化史：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,但是没关系呀，我希望能学到更多的东西，第一次写，有点凌乱，多多包涵。
网友评论