CSS属性学习:(一)定位-Positioning

positionz-indextop

positionCSS3


类型: Positioning

默认值: static

取值: relative | absolute | fixed | center[CSS3] | page[CSS3] | sticky[CSS3]

适用于: 除display属性定义为table-column-group | table-column之外的所有元素

取值

  • static: 对象遵循常规流。此时4个定位偏移属性不会被应用。
  • relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
  • absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
  • fixed: 与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
  • center:与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
  • page: 与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
  • sticky: 对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

demo

See the Pen vKoYaO by yrq110 (@yrq110) on CodePen.


z-index


类型: Positioning

默认值: auto

取值: <integer>

适用于: 定位元素,即定义了position为非static的元素

取值

  • auto: 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。
  • <integer>: 用整数值来定义堆叠级别。可以为负值。

demo

See the Pen VjowqY by yrq110 (@yrq110) on CodePen.


top


类型: Positioning

默认值: auto

取值: <length> | <percentage>

适用于: 定位元素,即定义了position为非static的元素

取值

  • auto: 无特殊定位,根据HTML定位规则在文档流中分配
  • <length>: 用长度值来定义距离顶部的偏移量。可以为负值。
  • <percentage>: 用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。

demo

See the Pen xOvxrN by yrq110 (@yrq110) on CodePen.


right/bottom/left


类型: Positioning

默认值: auto

取值: <length> | <percentage>

适用于: 定位元素

top


clipCSS3


类型: Positioning

默认值: auto

取值: <shape>

适用于: 绝对定位元素

取值

  • auto:对象无剪切
  • rect(<number>|auto <number>|auto <number>|auto <number>|auto):依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。
    上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0;
    右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度;
    示例:clip:rect(auto 50px 20px auto)

demo

See the Pen JKgKqQ by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. positionCSS3
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. z-index
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. top
    1. 3.1. 取值
    2. 3.2. demo
  4. 4. right/bottom/left
  5. 5. clipCSS3
    1. 5.1. 取值
    2. 5.2. demo
|