position有哪些属性值

简介: position有哪些属性值

position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。

static: 默认值,没有定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置,此属性下 top、right、bottom、left 和 z-index 属性无效。

relative相对定位:元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(此时会在此元素为添加定位时所在位置留下空白)。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。

absolute绝对定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,通过制定元素相对于最近的非static定位祖先元素的偏移,来确定元素位置,绝对定位可以设置外边距合并(margin),并且不会与其他边距合并。

fixed固定定位:元素的位置在屏幕滚动时不会发生改变位置。

sticky (黏性定位,吸顶效果):设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

相关文章
|
2月前
|
前端开发 容器
max-height 属性和 min-height 属性有什么区别?
【10月更文挑战第27天】`max-height`属性和`min-height`属性在控制元素高度方面各有特点和适用场景,通过合理地运用这两个属性,可以更灵活地实现各种页面布局效果,满足不同的设计和功能需求。
|
4月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
116 1
|
4月前
box-sizing属性值
box-sizing属性值。
35 13
|
4月前
box-shadow属性
box-shadow属性。
210 8
|
4月前
overflow属性
overflow属性。
51 0
|
8月前
Margin - 简写属性
Margin - 简写属性。
70 1
|
8月前
|
前端开发
z-index失效的几种情况,父标签position属性为relative的时候,详解
z-index失效的几种情况,父标签position属性为relative的时候,详解
|
8月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
167 0
通过id给input框和div赋值,修改属性值。
|
前端开发 容器
【CSS】定位属性position使用详解(static、relative、fixed、absolute)
css定位属性position:static、relative、fixed、absolute详细介绍及使用样例。
165 0
|
编译器 程序员 数据安全/隐私保护
C++ 类的定义和实现 class Color_and_Coordinate
C++ 类的定义和实现 class Color_and_Coordinate
126 0

热门文章

最新文章