css定位

position属性指定了元素的定位类型：static relative fixed absolute sticky

 

static：默认，没有定位，遵循正常的文档流对象

 

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

 

relative：相对定位元素的定位是相对其正常位置，移动之后，它原本所占的空间不会改变

比如：

{
    position:relative;
    left:-20px;
}

表示相对正常位置向左移动20px

 

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

 

sticky：基于用户的滚动位置来定位，在position:relative和position:fixed之间切换，它的行为像position:relative，当页面滚动超出目标区域（即特定阈值）时，行为像position:fixed。这个特定阈值指的是top/right/bottom/left之一，必须要指定这四个阈值之一sticky才可生效

 

元素的定位与文档流无关时，所以它们可以覆盖页面上的其它元素。z-index属性指定了元素的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

 

cursor属性：显示光标移动到指定的类型

 

overflow属性：设置当元素的内容溢出其区域时如何处理

 

top/right/bottom/left属性：定义定位元素外边距边界与其包含块边界之间的偏移

posted @ 2022-04-30 10:08  树叶本子  阅读(30)  评论(0)    收藏  举报