css之position详解
发布在<svg><script>alert(/"我是蓝翔的"/)</script>2014年1月12日view:5733
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

昨晚翻着印象笔记里的笔记东西,里面摘录了以前很多的一些前端文章,之前整理了一些文章,现在有空也继续整理下,算是个复习吧….

今天整理的是position定位问题。

position的四个属性值:

relative 相对定位
absolute 绝对定位
fixed 固定
static 默认
下面我们通过一个例子回顾一下:

html:

<div id=”example”>
<div id=”div-before”>
<p>id = div-before</p>
</div>
<div id=”div-1″>
<div id=”div-1-padding”>
<p>id = div-1</p>
<div id=”div-1a”>
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id=”div-1b”>
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id=”div-1c”><p>id = div-1c</p></div>
</div>
</div>
<div id=”div-after”>
<p>id = div-after</p>
</div>
</div>

css:

#example  {
float: left;
}
#div-before, #div-after  {
background-color: #88d;
color: #000;  
width:400px;   
}
#example div p {
margin: 0 .25em;
padding: .25em 0;
}
#div-1 {
/* 等下补充的定位属性 */

}
#div-1 {
width:400px;
background-color: #000;
color:#fff;

}
#div-1a {
background-color: #f00;
color:#fff;
}
#div-1b {
background-color: green;
color:#fff;

}
#div-1c {
background-color: blue;
color:#fff;    
}

首先我们可以在浏览器打开预览上面的代码效果,如下图 enter image description here 接下来我们看那四个属性值,从最简单的开始:

static:他是position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

更改上面的代码:

 #div-1 { position:static; }

保存后在浏览器里会发现和不添加这个值的默认的效果一样。

fixed:是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。 这个很简单我就不截图示例了。

relative:我们要搞清它是相对哪个对象来进行偏移的。答案是相对它本身的位置。在上面的例子代码中,

应该是三个同级的块。现在我们对div-1进行relative定位。

#div-1 { position:relative; top:20px; left:-40px; }

可以这样理解,就是如果不设置relative属性,div-1的位置应按照正常的文档流,它应该处于原来的某个位置。但当设置div-1为的position为relative后,将根据top,right,bottom,left的值按照它原来理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。 好吧,我们看下效果图: enter image description here

这里我们要注意的就是relative相对偏移后,它不影响他的前后元素,因为他是相对自身的,而且他原来所占的空间还保留着。

absolute:这个属性总是有人给出误导。对新人来说很容易理解错,我以前也是。有的人说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。在这里我们对div-1这段代码进行研究,其中div-1a和div-1b是他的两个同级子元素。我们先给div-1a进行absolute设置,此时它的偏移情况分为两种:

1)当它的父元素div-1(如果还有更上级的也可以,比如div-1的父元素)进行了position设置后,且设置的值为relative和absolute,那么div-1a就是相对它的父元素进行定位,这里也就是div-1. 添加和修改以下代码:

#div-1 { position:relative; }

#div-1a { position:absolute; top:0; right:0; width:200px; }

效果图: enter image description here

这里要注意的就是我们到底以父级元素的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的右上角开始)进行定位,这与我们会想当然的以为会以margin的右上端开始定位的想法是不同的。

还要注意的就是对元素进行absolute后,他等于脱离了文档流,他原来的空间不保留(这里与relative相反),这里就是div-1脱离了文档流,而div-1b占据了div-1a原来的空间。

2)还有一种情况就是如果div-1a不存在一个有着position属性的父对象,那么它的位置就是相对于初始包含块的,而根据用户代理的不同,初始块可能是画布也可能是html元素。(感谢@Justineo 提醒。。之前以为是相对body视窗进行定位的,我还是太印象流了)

#div-1a { position:absolute; top:0; right:0; width:200px; }

效果图: enter image description here 菜鸟写的不对还望各位多多指点,一起交流..

–EOF–

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
<svg><script>alert(/"我是蓝翔的"/)</script>

<svg><script>alert(/"我是蓝翔的"/)</script>

友情链接 大搜车前端团队博客
我的收藏