首页技术position属性值有哪些?position属性常用属性值

position属性值有哪些?position属性常用属性值

编程之家2026-06-101065次浏览

很多朋友对于position属性值有哪些和position属性常用属性值不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!

position属性值有哪些?position属性常用属性值

position 属性有哪些值,各有什么特点

position有以下可选值:

其中,CSS定位机制:

CSS有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在(X)HTML中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

position属性值有哪些?position属性常用属性值

绝对定位,绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

固定定位,与绝对定位相似,但元素的包含块为 viewport视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中,"one"元素定位在离页面顶部 80px,离页面左侧 20px的位置。

相对定位,相对于其正常位置进行定位,不影响其他元素的偏移。

粘性定位,可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位

这是一个结合了 position:relative和 position:fixed两种定位功能于一体的特殊定位。常见的吸顶、吸底(头部返回栏,底部切换栏等)的效果都是使用这个属性:

注意:

position属性值有哪些?position属性常用属性值

静态定位,HTML元素默认情况下的定位方式为 static(静态),静态定位的元素不受 top、bottom、left和 right属性的影响,它始终根据页面的正常流进行定位

inherit值如同其他 css属性的 inherit值,即继承父元素的 position值。

position属性有哪4种取值有何区别

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

2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。

3、absolute(绝对定位):生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定。可通过z-index进行层次分级。

4、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定。可通过z-index进行层次分级。

注意事项

1、如果没有TRBL(top、right、bottom、left),以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。

2、如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

3、如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由 TRBL决定。即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根本没有影响。

css的position的属性有哪些

position属性指定了元素的定位类型。它有五个属性,分别是

static:HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative:相对定位元素的定位是相对其正常位置。

fixed:元素的位置相对于浏览器窗口是固定位置。注:即使窗口是滚动的也不会移动

absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。注:定位使元素的位置与文档流无关,因此不占据空间。定位的元素和其他元素重叠。

sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative与 position:fixed定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

position属性值有哪些和position属性常用属性值的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!

input文本域的属性(5种input输入框类型)蓝色念气的气息?蓝色的念气