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是啥值它就是啥值。

 

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