CSS定位

最新推荐文章于 2024-09-13 23:28:46 发布

阿征学IT

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量488

点赞数 2

分类专栏： WEB前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46253800/article/details/141822452

版权

WEB前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Static定位

特点：HTML元素的默认定位方式。遵循正常的文档流，不会受到top、bottom、left、right属性的影响。
应用场景：适用于大多数不需要特殊定位的场合。

示例：

div.static { 
  position: static; 
  border: 3px solid #73AD21; 
}

Relative定位

特点：相对于元素原本在文档流中的位置进行定位。移动后，原来的位置不会被其他元素占据。
应用场景：适用于需要微调元素位置，而不改变其他元素排列的情况。

示例：

div.relative { 
  position: relative; 
  top: 20px; 
  left: 30px; 
  width: 200px; 
  height: 100px; 
  background-color: lightgreen; 
}

Absolute定位

特点：完全脱离文档流，相对于最近的已定位祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常为<body>）定位。
应用场景：适合创建层叠布局效果，如弹出框、提示框等。

示例：

div.absolute { 
  position: absolute; 
  top: 20px; 
  left: 30px; 
  width: 200px; 
  height: 100px; 
  background-color: yellow; 
}
/* 设置父容器为相对定位以便成为绝对定位元素的参考 */
div.parent { 
  position: relative; 
  width: 300px; 
  height: 300px; 
  background-color: lightgray; 
}

Sticky定位

特点：粘性定位，基于用户的滚动位置进行定位。在滚动到一定位置前表现为relative，之后表现为fixed效果。
应用场景：非常适合做粘性头部、侧边栏或导航栏，在用户滚动到一定位置后固定显示。

示例：

div.sticky { 
  position: sticky; 
  top: 0; 
  width: 200px; 
  height: 100px; 
  background-color: orange; 
}

阿征学IT

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录