css的position的简单介绍
CSS position属性
position很重要,有以下几个值:static,relative,absolute,fixed。
*所有主流浏览器都支持 position 属性,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:
div style="position: relative;"
div style="position: absolute; top: 10px; left: 10px;"/div
/div
css中的position
绝对定位:position: absolute;有如下两种情况
1,没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点
2,有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下:
(1),父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定
(2),父级有 position 属性,父级的“坐标原始点”为原始点
相对定位:position: relative;
参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,并且会在父块以外占据相同的大小。
知道这两个就行了
css样式中,position元素有几个属性?它们之间有什么联系和区别是什么?
CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
怎么理解css的position
在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试
一般的在w3c中我们可以很容易的获取定义:
static : 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit :规定应该从父元素继承 position 属性的值。
absolute : 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative : 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
总的来说 :
static呢,就是正常的文档流顺序,默认的,相当于没有定位!
fixed呢, 就是相对于浏览器窗口,就是你滚动条怎么滚动,他还是那个位置,就想是 “粘” 在窗口上了!
inherit呢, 就是从父元素继承 position 属性的值,
absolute呢,是脱离文档流的原来的位置是不继续占据了,如果他的父级元素中有已经定位了的不管是absolute的还是relative,它都会相对于他的父级元素来定位,如果他的父级元素中没有定位了的那么它就是相对于body来定位的。也就是说absolute的绝对是有参照物的!
relative呢,是不会脱离文档流的原来的位置也就继续占据了,它是只相对于自身原来的位置来定位的!
前三个是很容易理解的,对于absolute和relative的结合使用,做了几个测试
测试(absolute和relative)
1.单独的absolute和relative
2.relative中的relative,absolute中的relative
3.absolute中的absolute,relative中的absolute
CSS中position属性的使用详解
position 这个属性决定了元素将如何定位。它的值大概有以下五种:
每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。
position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。
而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:
把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。
该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 ,设置 absolute 之后发现它可以设置宽高了)。
如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。
由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。
下面来看一下插件的'参数用法示例:
1. position:static
所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。
一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。
CSS Code复制内容到剪贴板
#P-1 {
position:static;
}
2. position:relative
如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】
CSS Code复制内容到剪贴板
#P-1 {
position:relative;
top:20px;
left:-40px;
}
3. position:absolute
当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。
CSS Code复制内容到剪贴板
#P-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
4. position:relative + position:absolute
如果我们给 P-1 设置 relative 定位,那么 P-1 内的所有元素都会相对 P-1 定位。如果给 P-1a 设置 absolute 定位,就可以把 P-1a 移动到 P-1 的右上方。
CSS Code复制内容到剪贴板
#P-1 {
position:relative;
}
#P-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
5. 两栏绝对定位
现在就可以使用相对定位和绝对定位来做一个两栏布局了。
CSS Code复制内容到剪贴板
#P-1 {
position:relative;
}
#P-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
#P-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
6. 两栏绝对定位定高
一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。
CSS Code复制内容到剪贴板
#P-1 {
position:relative;
height:250px;
}
#P-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
#P-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Css中Position定位详解
Position属性确认元素的定位
static 是默认定位值,它的定位元素不受top、left、right、bottom的影响,也就是说你给元素设置这四个属性的任何值都没有效果
relative 相对定位,设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。
比如说在做表单布局的时候,有时候label的值并没有和输入框上下居中对齐,它有一点点偏下,效果不是很好看,这个时候我们可以给label向上设置一下偏移让他们居中对齐
absolute 是绝对定位,绝对定位的元素相对于最近的定位祖先元素进行定位,如果没有定位祖先元素,那么就按body定位
absolute最典型的例子就是结合relative一块完成效果,比如我有一个p,它是在页面居中的,但是它的宽度和高度是动态的,我们还有一个span标签希望永远在这右下角10px的位置,这个时候我们就可以利用absolute完成
fixed 是相对视口定位的,简称浮云定位,这个意味着就像你滚动页面,它始终位于同一个位置,top、left、right、bottom用于设置当前元素的位置。
常用的例子就是页面右下角,滚动到顶部的的功能,我们可以对这个元素设置fixed浮动定位,当用户一直向下滚动浏览网页后,想一下子回到顶部,它只要点这个元素就行了,因为之个元素是浮云定位,所以永远是在用户可视范围的右下角