position属性值有哪些

如题所述

position属性值有static、relative、absolute、fixed、sticky。

1、static:该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。

2、relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。

3、absolute:是不为元素预留空间,通过指定元素相对于最近的非static定位祖先元素的偏移,来确定元素位置。

4、fixed:是指不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

5、sticky:盒位置根据正常流计算,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为table 时),该元素定位均不对后续元素造成影响。

参考资料来源:百度百科-position

温馨提示:答案为网友推荐,仅供参考
第1个回答  2020-02-18

有以下几种:

1、absolute:

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

2、fixed:

生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

3、relative:

生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

4、static:

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。     

扩展资料:

在大多数情况下,height和width被设定为auto的绝对定位元素,按照内容大小的不同来调整不同的尺寸。

但是,被绝对定位的元素可以通过指定top和bottom,保留height未指定(即auto),来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间。 

如果指定了left和right,当direction设置为ltr(水平书写的中文、英语)时left优先,当direction设置为rtl(阿拉伯语、希伯来语、波斯语由右向左书写)时right优先。

参考资料来源:百度百科——position (定位元素)

本回答被网友采纳
第2个回答  2020-10-21

CSS的Position属性及其使用