随笔 - 27, 文章 - 0, 评论 - 0, 阅读 - 7516
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS position (定位)

Posted on   卡卡Kk  阅读(76)  评论(0编辑  收藏  举报

CSS position (定位) 属性

position 属性指定了元素的定位类型。元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。

position 属性的五个值:

  • static:

    HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响。

  • relative:

       相对定位元素的定位是相对其正常位置。

       移动相对定位元素,但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

  • fixed:

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动。

    注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

    Fixed定位使元素的位置与文档流无关,因此不占据空间。

    Fixed定位的元素和其他元素重叠。

  • absolute:

       绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

  • sticky:

    sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

    position: sticky; 基于用户的滚动位置来定位。

    粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

重叠的元素是什么?

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序。

相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示