HTML+CSS－－position大法好

其实在HTML和CSS的学习中，css的position属性应该是难点之一，难在你需要静下心来仔细搞清楚它的每一个值的意义、效果和用法。但是它的功能很强大，效果也是很令人惊艳的，因为你可以用它去实现一些float很难去实现的定位效果，比如下图：

等等，今天我们就以第一个图的样式为例，讲讲position的用法。

 

首先定义一个div，然后在里面插入底层图片

<div class="Service_pic">
	<img src=".../流程图.png" class="center-block Service_pic_img">
</div>

（其中center-block是Bootstrap自带的居中类）

CSS定义：

.Service_pic{
	margin-top: 100px;
	position: relative;
}
.Service_pic_img{
    width: 30%;
}

Service_pic类的margin-top设置只是为了让它与顶部有一定的距离，这样比较美观。Service_pic_img的宽度定义则是为了让图片宽度变成总div宽度的30%，height则随着图片宽度大小按比例缩放。这里的Service_pic还设置了position属性，其属性值为relative。

 

那么这里我们要说明一下，position属性的默认值是static，就是说当你没有定义position属性的值的时候，元素的position值就是static。

官方解释static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。也就是说你不能给position：static的元素定义top, bottom, left, right 或者 z-index 属性，它们是无效的。

 

官方解释relative：

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

也就是说当你不给position：relative定义top, bottom, left, right值的时候，它跟原来的位置是没有任何区别的。

那么我们这里是给外面的div定义了一个position：relative的值的，但是却没有给出其 top, bottom, left, right 或者 z-index 属性定义，这是为什么呢？后面你就知道了哈哈

这里要注意的一点是relative是不脱离文档流的，也就是说无论你把它移动到哪里，它原有的位置还是会留着的。

 

生成效果如下图： 

 

然后当然就是把图片文字啥的加进去，代码如下：

<div class="Service_pic">
    <img src=".../流程图.png" class="center-block Service_pic_img">
    <div class="step1">
        <h3 class="step1_num">0 1</h3>
        <h3 class = "step1_header">需求分析</h3>
        <img src=".../01需求分析.png" class="step1_img">
    </div>
</div>

效果如下图：

 

最后当然是来调整最后的样式啦，代码如下：

.step1{
    font-family: DIN Condensed;
    color: #494949;
}
.step1_num{
    position: absolute;
    top:-0.1%;
    left: 60.4%;
    color: white;
    font-size: 4rem;
}
.step1_header{
    position: absolute;
    top:0.2%;
    left: 68%;
    font-size: 2.5rem;
}
.step1_img{
    position: absolute;
    top:-4%;
    left: 21.6%;
    width: 19%;
}

其中step1类是最外层的div，定义字体的样式和颜色。

step1_num 类定义的是数字的位置与样式，字体大小和颜色这些我们就先不说了，我们来说说position: absolute。

官方解释 absolute：

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

通过上文我们知道，position的默认值是static，那么也就是说，absolute只会根据非static的第一个父元素进行定位。举例则为，h3 .step1_num采用了position: absolute，而它的父元素div .step1是采用position默认值static的，所以h3 .step1_num并不会相对div .step1进行定位。所以h3 .step1_num会继续向他的上一级父元素查找，直到找到div .Service_pic这个采用position: relative;定位的父元素以后，h3 .step1_num才会根据他定位。否则它就一直查找上去，如果最终还是没找到position不为static的元素，就以浏览器窗口为基准定位。再贴一下代码你们自己琢磨一下：

<div class="Service_pic">
    <img src=".../流程图.png" class="center-block Service_pic_img">
    <div class="step1">
        <h3 class="step1_num">0 1</h3>
        <h3 class = "step1_header">需求分析</h3>
        <img src=".../01需求分析.png" class="step1_img">
    </div>
</div>

所以一开始我们把最外层的div .Service_pic设置成position: relative;是因为我们想让其中的内容（div .step1）根据这个div .Service_pic的位置进行定位而不是最外层的浏览器窗口，这样子当窗口和图片都缩放的时候才不会产生错位。

div .Service_pic采用position: relative;的原因是 relative相对于其正常位置进行定位，而我们并不需要div .Service_pic有任何位移，只需要它呆在原来的地方，为它的子元素提供一个定位的基准。

那你可能会问干嘛那么麻烦，直接把div .step1设置成position: relative;不就好了嘛。但是你别忘了position: relative;是不脱离文本流的，下面几个白大洞这样好看？

对这里还要说position: absolute是脱离文本流的，也就是正常文本中并不会为它保留位置，有点像float但又比float好控制。

然后效果如下图：

（位置和大小只能自己慢慢调整一下咯）

这个页面的后几步内容与方法大体相同，这里不再赘述。

 

position一共有五种值：absolute、relative、static、inherit、fixed

前面三种我们一般用的比较多，前面也介绍过了，最后来说说inherit与fixed

fixed：

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position属性的fixed值比较烦，我们在很多网站上看到那种往下拉滑动条还在同一个位置的小广告就是用它做的，因为它根据浏览器窗口进行定位，所以无论内容如何改变它的位置都是不能动摇的。

 

inherit

规定应该从父元素继承 position 属性的值。

inherit其实没啥好说的，它父元素的position是啥值它就是啥值。

 

今天的分享就到这里！每天进步多一点，每天都有好心情！