position:

相对定位#xff1a;让…CSS的定位属性有三种分别是绝对定位、相对定位、固定定位。

position:

相对定位让元素相对于自己原来的位置进行位置调整可用于盒子的位置微调。

向下偏移量;

contenttitleDocument/title​style

0px;}​.div1{width:

relative;/*相对定位相对于自己原来的位置*/left:

50px;/*横坐标正值表示向右偏移负值表示向左偏移*/top:

50px;/*纵坐标正值表示向下偏移负值表示向上偏移*/​width:

200px;height:

也就是说相对定位的真实位置还在老家只不过影子出去了可以到处飘。

如果想做“压盖”效果把一个div放到另一个div之上我们一般不用相对定位来做。

相对定位就两个作用

1微调元素

绝对定位定义横纵坐标。

原点在父容器的左上角或左下角。

横坐标用left表示纵坐标用top或者bottom表示。

格式举例如下

绝对定位之后标签就不区分所谓的行内元素、块级元素了不需要display:block就可以设置宽、高了。

1如果用top描述那么参考点就是页面的左上角而不是浏览器的左上角

2如果用bottom描述那么参考点就是浏览器首屏窗口尺寸好好理解“首屏”二字对应的页面的左下角

用bottom的定位的时候参考的是浏览器首屏大小对应的页面左下角。

一个绝对定位的元素如果父辈元素中也出现了已定位无论是绝对定位、相对定位还是固定定位的元素那么将以父辈这个元素为参考点。

如下子绝父相

绝对定位将以box1为参考因为box2没有定位box1就是最近的父辈元素/div/div再比如

div

绝对定位将以box2为参考因为box2是自己最近的父辈元素/div/div

子绝父绝、子绝父相、子绝父固都是可以给儿子定位的。

但是在工程上如果子绝、父绝没有一个盒子在标准流里面了所以页面就不稳固没有任何实战用途。

工程应用

“子绝父相”有意义这样可以保证父亲没有脱标儿子脱标在父亲的范围里面移动。

于是工程上经常这样做

下图中绿色部分是父亲div的padding蓝色部分p是div的内容区域。

此时如果div相对定位p绝对定位那么

p将无视父亲的padding在border内侧为参考点进行定位

工程应用

绝对定位非常适合用来做“压盖”效果。

我们来举个lagou.com上的例子。

现在有如下两张图片素材

charsetUTF-8titleDocument/titlestyle

100px;width:

url(http://img.smyhvae.com/20180116_1115.png);background-position:

-108px

srchttp://img.smyhvae.com/20180116_1116.jpg

alt/divh4广东深圳宝安区建安一路海雅缤纷城4楼/h4/div

/body

“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。

我们知道如果想让一个标准流中的盒子在父亲里居中水平方向看可以将其设置margin:

可如果盒子是绝对定位的此时已经脱标了如果还想让其居中位于父亲的正中间可以这样做

div

如上方代码所示我们先让这个宽度为600px的盒子左边线居中然后向左移动宽度600px的一半就达到效果了。

left:50%;

固定定位就是相对浏览器窗口进行定位。

无论页面如何滚动这个盒子显示的位置不变。

比如我们经常看到的网页右下角显示的“返回到顶部”就可以固定定位。

style

center;line-height:30px;color:white;text-decoration:

none;

需要注意的是假设顶部导航条的高度是60px那么为了防止其他的内容被导航条覆盖我们要给body标签设置60px的padding-top。

!DOCTYPE

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

html

xmlnshttp://www.w3.org/1999/xhtml

xml:langen

contenttext/html;charsetUTF-8titleDocument/titlestyle

0;padding:

body{/*为什么要写这个*//*不希望我们的页面被nav挡住*/padding-top:

60px;/*IE6不兼容固定定位所以这个padding没有什么用就去掉就行了*/_padding-top:0;}.nav{position:

fixed;top:

60px;color:white;text-decoration:

none;}.inner_c

2z-index值没有单位就是一个正整数。

默认的z-index值是0。

3如果大家都没有z-index值或者z-index值一样那么在HTML代码里写在后面谁就在上面能压住别人。

定位了的元素永远能够压住没有定位的元素。

4只有定位了的元素才能有z-index值。

也就是说不管相对定位、绝对定位、固定定位都可以使用z-index值。

而浮动的元素不能用。

5从父现象父亲怂了儿子再牛逼也没用。

意思是如果父亲1比父亲2大那么即使儿子1比儿子2小儿子1也能在最上层。

针对123条举例如下

z-index属性的应用还是很广泛的。

当好几个已定位的标签出现覆盖的现象时我们可以用这个z-index属性决定谁处于最上方。

也就是层级的应用。

1必须有定位除去static