css定位语法
position : static | absolute | fixed | relative
说明:
从上面语法可以看出,定位分为静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。其中最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative),我会重点介绍一下。
1.position:static;
在CSS中所有元素的“position”属性的默认值都是“static”,故不需要显式的为每个元素设置“position:static”。
2.position:relative;
相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
如果给某个元素指定了postion的值为“relative”,那么可以通过top,right,bottom,left来设置元素的定位值。
看个小例子:
.box2{
background-color: green;
position: relative;
left: 100px;
top: 50px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
显示结果为:
通过以上可以总结为一下几点:
(1)元素设置了relative时,是相对于元素本身位置进行定位;
(2)元素设置了relative后,可以通过“top,right,bottom,left”改变元素当前所在的位置,但元素移位后,同样点有当初的物理空间位;
(3)元素设置了relative后,如果没有进行任何的“top,right,bottom,left”设置,元素不会进行任何位置改变。
(4)top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有top起作用。
left的值表示对象相对原位置向右偏移的距离,right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。
上面几点都是比较好理解,那么现在针对第二点,我重点说明一下:
相对定位不脱离标准流,真实的位置在老家,只不过是影子出去了,可以到处飘。(这个飘是利用top,right,bottom,left进行控制的),有图有真相
相对定位的用途:
相对定位是有坑的,就是在老家占有位置,所以一般不用做“压盖”的效果。其作用一般是:
(1)微调元素
(2)做绝对定位的参考,子絶父相(说完 “绝对定位”之后,再详细介绍)
相对定位的定位值:
用left、right描述盒子右、左的移动
用top、bottom描述盒子的下、上的移动
position:relative;
top:10px;
left:40px; 表示向右下方移动
position:relative;
top:20px;
right:40px; → (向左移动40px) 表示向左下方移动
position: relative;
top: -200px; → 负数就是相反的方向,如果是正,就是下边,如果是负数就是上边
right: -200px;
position: relative;
right: -300px;
bottom: 300px;
//完全等价于:
position: relative;
left: 300px;
bottom: 300px;
3.position:absolute;
绝对定位的盒子是脱离标准文档流的。如果你给元素指定了absolute,整个元素就会漂出文档流,所有的标准文档流的性质,绝对定位之后就不遵守了;而且元素自身的物理空间也同时消失了,不像“relative”还具有原先的物理空间。
绝对定位之后,标签就不区分所谓的行内元素、块级元素了,行内元素不需要设置display:block;就可以设置宽、高了;我们演示个例子看看:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
background-color: gold;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
绝对定位的参考点:
(1)绝对定位的参考点如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角;
(2)绝对定位的参考点如果用bottom描述,那么定位参考点就是浏览器首屏窗口尺寸,对应的页面左下角。
这个比较难理解 ,来道题看看吧 。
你会了吗???
(3)以盒子为参考点
一个绝对定位的元素,如果父辈元素中也出现了定位的元素,那么将以父辈这个元素,为参考点。
注意:以盒子为参考点时,要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷,也可能是曾祖父。总之,要听最近的已经定位的祖先元素的。
这是以父亲作为参考点
这是以父辈元素作为参考点
还要注意的是:
绝对定位的参考点不一定是相对定位,任何定位,都可以作为参考点
来个例子看看
这是以父亲绝对定位作为参考点的
需明白:
子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
同时还要知道:
绝对定位的儿子,无视参考的那个盒子的padding。
绝对定位的小用处:让盒子居中
绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。
来个例子 看看绝对定位如何让盒子进行居中的
其实非常简单,就是left:50%; margin-left:负的宽度的一半。
4.position:fixed;
固定定位,就是相对于浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。元素框的表现类似于将 position 设置为 absolute。固定定位脱标!IE6不兼容
这个简单 自己去验证一下吧
固定定位的小用途:返回顶部按钮 和顶部导航条
讲完定位 不得不提一下z-index了。
z-index,
又称为对象的层叠顺序,它用一个整数来定义堆叠的层次。
看个例子:
正常情况下:
但是 你看我给他们分别加一个z-index值
你会发现绿色盒子压盖住了蓝色盒子
总结几点:
1.z-index值表示谁压着谁。数值大的压盖住数值小的。
2.只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。
使用static 定位或无position定位的元素以及浮动的元素z-index属性是无效的。
3.z-index值没有单位,就是一个正整数,如z-index:980;默认的z-index值是0;
4.如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁就在上面压住别人。定位的元素,永远能够压住没有定位的元素。
5.z-index的盒子有从父现象。如果父亲的盒子比不上其他人的z-index值,那么儿子的z-index值再大也没用。
这个从父现象 我用个例子说明一下:
嗯!说的差不多了,作为学习笔记用。如有不对的地方也烦请各位给指出一下,这个寒假我会继续整理以前学的知识的!