CSS中position属性详解
发布网友
发布时间:2022-04-23 07:54
我来回答
共6个回答
热心网友
时间:2022-04-06 12:33
根据W3C的解释为:position 属性规定元素的定位类型,把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值。
我们用的最多的absolute和relative,接下来可以通过具体例子来更加直观地体现。
举例
一:绝对定位
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
二:相对定位
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意
position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline; 来解决的。position:relative不会隐式改变display的类型。
热心网友
时间:2022-04-06 13:51
主要是元素的定位效果,position的用法和定义如下:
position主要是用在布局时的定位,所有的html标签都可以使用,而绝对固定元素会产生一个块级的框框,相对定位元素会默认偏移;
absolute属性,将元素设置为绝对定位,元素可以通过“left,right,top,botton”属性来决定元素的位置,通俗点说其实绝对定位,就是相对于浏览器的上下左右;
2.relative元素,就是相对定位,元素可以通过"left,rightTOP.botton"等改变元素的位置,就是相对于父元素的点来进行定位;
3.fixed就是固定定位了,这个就更好理解了,你可以看到在网页上经常会有一个元素比如"置顶"这个吧,其实就是用的固定定位,就是说,相对于浏览器当前看到的什么位置,,他的属性同样是依据"left,right,top,botton"来进行改变;
position扩展认知:
属于css层叠样式表当中的一种,定位属性,在前端布局中起到至关重要的作用。
热心网友
时间:2022-04-06 15:59
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
热心网友
时间:2022-04-06 18:23
同楼上的
补充一下再写出实例就比较直观了
# div
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}
# div 0
{
background:#ccc; width:200px; height:200px;
position:fixed ; left:200px; top:200px
}
# div 1
{
background:#ccc; width:200px; height:200px;
position:relative ; left:200px; top:200px
}
# div 2
{
background:#ccc; width:200px; height:200px;
position:inherit ; left:200px; top:200px
}
热心网友
时间:2022-04-06 21:05
给你一个网址,相信你会有所收获的。
http://www.w3school.com.cn/css/css_positioning.asp
参考资料:http://www.w3school.com.cn/css/css_positioning.asp
热心网友
时间:2022-04-07 00:03
position用来设定元素的定位类型,有absolute(绝对定位)、relative(相对定位)、static(静态定位,默认值)、fixed(固定定位)四种。
static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative:位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute:位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed:位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
参考:http://www.w3school.com.cn/jsref/prop_style_position.asp
CSS中position属性详解
CSS中position属性详解CSS中的position属性是一个关键属性,用于规定元素的定位方式,包括静态定位、相对定位、绝对定位和固定定位。根据W3C的定义,这个属性的作用是控制元素在文档中的定位状态。绝对定位(absolute):元素相对于其最近的已定位祖先元素定位,如果没有,则相对于文档的初始包含块。它不参与文档...
position(五种属性,以及每个属性的特点)
6. position: inherit 规定应该从父元素继承 position 属性的值。7. posiyion: initial 设置该属性为默认值,详情查看 CSS initial 关键字 initial 关键字用于设置 CSS 属性为它的默认值。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
CSS中position是什么含义啊?
在CSS中,position: absolute是一种定位方式。当一个元素的position属性被设置为absolute时,这个元素的位置将相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素,那么它会相对于初始包含块进行定位。这意味着,你可以通过指定left、right、top和bottom属性,来精确地控制元素的位置。1. 绝...
css中position:fixed;是什么意思?
在CSS中,position属性用于控制元素在网页上的定位方式。它有五种不同的值,包括static、relative、absolute、fixed和sticky。二、position:fixed的具体含义 当元素的position属性被设置为fixed时,该元素的位置是固定的,即该元素会固定在浏览器窗口的指定位置,不随页面的滚动而移动。这种定位方式常用于创建...
CSS文档定位指南:static、relative、absolute、fixed、sticky详解
CSS中position属性用于指定元素的定位方法的类型(static、relative、absolute、fixed、sticky)。静态定位position:static此属性未HTML元素默认定位,一个元素没有以任何特殊的方式定位,它总是按照页面的正常流程定位。在此属性下,属性值top、left、right、bottom和z-index对HTML元素没有影响。.parent{width...
css里面position:relative与position:absolute区别
详细解释:position:relative 当一个元素的position属性设置为relative时,它会相对于其正常位置进行偏移。即使元素被移动或偏移,它仍然保持在文档流中的位置,并占据其原始空间。其他元素会围绕这个相对定位的元素进行排列。position:absolute 绝对定位元素的位置相对于最近的已定位祖先元素。如果不存在已定位的...
CSS position属性
static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不...
css的position的属性有哪些
position 属性指定了元素的定位类型。它有五个属性,分别是 static:HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。relative:相对定位元素的定位是相对其正常位置。fixed:元素的位置相对于浏览器窗口是固定位置。注:即使窗口是滚动的也不...
css 中position: fixed;
CSS中的position属性提供了对元素定位的控制,其中position: fixed是一个关键的值。它使得元素在浏览器窗口中始终保持固定的位置,不随页面滚动而变化。要实现这种定位,你需要使用"left", "top", "right", "bottom"这些属性来指定元素相对于视口的确切位置。区别于static定位(默认值,元素按照文档流自然...
css样式中,position元素有几个属性?它们之间有什么联系和区别是什么...
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。position 属性值的含义:static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。relative 元素框偏移某个距离。元素仍保持其未...