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 @   树叶本子  阅读(26)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示