FE入门 — position定位

定位的重要性

为了让网页中的元素，在我们html中更加合理的分布和展示。我们需要使用position属性，对其进行定位。例如很多网页中的提示语浮动层，一些特殊情况的形状见的拼合。废话不多说，直接进入教程。

定位种类

• static：无特殊定位—html中默认
• absolute：绝对定位—对象从文档流中脱离（不再占位），使用left，right，top，bottom等属性进行绝对定位。其层叠展示，使用z-index来定义。
• relative:相对定位—可以使用left，right，top，bottom等属性进行位置调整，但是，原有位置，依然被其占据。

实际演示

测试所用样式如下，两个div，宽度200，高度100，蓝色红色

<div class="test0">
  <div class="test1 "></div>
  <div class="test2 "></div>
</div>

.test0{
margin-top: 50px;
}
.test1,.test2{
width: 200px;
height: 100px;
}
.test1{
background: blue;
}
.test2{
background: red;
}

现在原始的效果如下：

因为test1 和test2是块级元素，所以，两个div各自占一行，这个没有问题吧~

相对定位relative

现在，我们加入一组test0，并将其第二个子元素test2赋予相对定位样式，会发生什么呢？

<div class="test0">
  <div class="test1"></div>
  <div class="test2 p-re"></div>
</div>

.p-re{ 
  position:relative; 
  left: 20px;
  top: 60px;
}

效果如下：

这个非常好解释，因为test2设置了相对定位，又设置了左边和顶部的偏移，故离开原有位置了。向右移动20px，向下移动60px。

绝对定位absolute

相对定位搞定了，那我们说说绝对定位。绝对定位一般是需要和相对定位一起使用，现在我们将test2设置为absolute，且设置一定偏移量。

<div class="test0">
  <div class="test1"></div> 
  <div class="test2 p-ab"></div>
</div>

.p-ab{
  position:absolute;
  left: 20px;
  top: 20px;
}

于是，效果是：

如果test0不设置position：relative的话，那么test2将会以其最近的position：relative的元素为根节点，进行偏移。如果其各个父节点都未定义，则以节点为偏移起始点，且test2元素不在页面中保留位置。

课外练习

于是，有了之前的基础，我们就可以就行提示窗的编写了。
我们的目标是，鼠标移动到一个元素后，它的上方出现一条提示窗口。为了完成这个需求，我们使用定位的知识点，以及css选择器。

<div class="pop-box">
  <a class="link">点击我</a>
  <span class="pop-window">lalalal</span>
</div>

//父节点设置
.pop-box{
width: 50px;
margin-top: 200px;
position: relative;}
//提示窗口设置
.pop-window{
display: none;
position: absolute; 
top: -60px; 
left: 20px;
width: 100px;
height: 50px;
padding: 5px;
background: #fdf0d1 ;
color: #333333;
}

//提示窗口出现条件（hover）
.pop-box:hover .pop-window{
display: block;
}
//a标签样式
.link{
text-decoration: underline;
}
.link:hover{
color: #297dd7;
cursor: pointer;
}

未移动到其上方时：

移动到上方后：

这个小例子很简单，并未包括一些复杂的样式。不过，只要掌握原理，那么再复杂的样式，都是一个道理。
或许这就是前端的魅力吧：我们总能让人与机器的交互变得更友善，更轻松。