position

position该属性设置元素的定位方式，且在动画特效脚本化时效果很好。

语法

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

值

值	描述
static	该关键词规定元素正常使用的布局行为，即元素在文档流中当前的布局位置，其他属性无效。
relative	该关键词表示元素加在未添加定位时的位置，在不改变页面布局时调整元素位置。
absolute	该关键词表示通过最近的非 static 定位祖先元素的偏移，来确定元素的位置。且元素可设置外边距，不会和其他边距合并。
fixed	该关键词表示通过屏幕窗口的位置来确定元素位置，元素的位置在屏幕滚动时不会改变。打印时，元素会出现在每页固定的位置。该属性会创建新的栈上下文。
sticky	该关键词表示元素先按照普通文档流定位，然后相当于该元素在文档流中最近的块级父元素定位。在所有情况下，该元素定位均不对后续元素造成影响。

例子

HTML

<div id="red">
   <div id="orange">
   </div>
</div>

CSS

#red {
      width: 200px;
      height: 50px;
      background: red;
      border: solid 1px red;
}
#orange {
      width: 30px;
      height: 30px;
      background: orange;
      position: absolute;
      left: 300px;
}

执行结果

参考

相关链接

外部链接

position-MDN


跳至内容顶部