CSS中常见的位置(position)属性

时间:2022-06-18 03:52:44

常用的位置属性列表:

position(top、bottom、left、right) 、overflow、z-index

position用法:

描述
relative

相对定位,原位置仍占用空间,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute

绝对定位,不保留原空间,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

绝对定位,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

position实例:http://zh.learnlayout.com/position-example.html

overflow用法:

(注意overflow-x\overflow-y应用)

overflow 属性是用来设定当內容放不下时的处理方式。可能的值包括:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
initial 用于设置 CSS 属性为它的默认值(初始值)。
inherit 规定应该从父元素继承 overflow 属性的值。

z-index应用:

z-index 属性是用來决定元素重叠的顺序。换言之,当两个元素有重叠的情况出现时,z-index 值将会決定哪一個元素在上面。z-index 值比较大的元素会被放在上面。

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。