CSS的position属性完全解析

CSS的position属性完全解析

什么是position属性?

position是CSS中用来设置元素定位方式的属性,它有五种取值分别是:

  • static
  • relative
  • absolute
  • fixed
  • sticky

static

staticposition属性的默认值,元素不受top, right, bottom, left or z-index影响,即便设置了它们也不会生效。

relative

relative相对于元素自身正常位置进行定位。被定位的元素仍然根据文档流进行排列,其它元素仍然会占据原有的位置不受影响。当你设置top, right, bottom, left或z-index的时候,被定位的元素的位置会发生变化。

示例代码:

div.relative {
  position: relative;
  left: 30px;
  top: 50px;
}

absolute

absolute相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的body元素。被定位元素从文化流中脱离,不再占据原来的位置,所以其它元素位置会被改变。

示例代码:

div.parent {
  position: relative;
}

div.child {
  position: absolute;
  top: 30px;
  right: 50px;
}

fixed

fixed相当于一种特殊的绝对定位,而且是相对于浏览器窗口来计算位置。元素无论如何滚动,都会常驻在屏幕上的指定位置。和absolute一样,元素也从文化流中脱离,不影响其它元素。

示例代码:

div.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

sticky

sticky是一个新属性,还未广泛使用。它做的事情类似于fixed,sticky是相对于其它元素进行定位,但是具体的定位方式又和relative非常相似。在满足特定条件时,元素会固定在一个位置,但是随后又会继续按照正常的relative方式进行定位。

示例代码:

div.sticky {
  position: sticky;
  top: 0;
}

总结

以上是position属性的五种值的说明,它是CSS中用来定位元素位置的属性,切记在设置元素定位时不要滥用position属性,否则会将文档流打乱带来不良的排版效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS的position属性完全解析 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • Adobe Dreamweaver CS3 官方简体中文龙卷风修正版v1.1下载

    下面就为大家介绍下载”Adobe Dreamweaver CS3 官方简体中文龙卷风修正版v1.1″的完整攻略。 1. 确认系统要求 在下载Adobe Dreamweaver CS3之前,我们需要确认电脑是否满足软件的最低系统要求。Adobe Dreamweaver CS3支持 Windows XP, Windows Vista和Windows 7等操作系统…

    css 2023年6月9日
    00
  • CSS学习笔记之常用Mixin封装实例代码

    “CSS学习笔记之常用Mixin封装实例代码”是一篇介绍CSS中Mixin的使用的文章,其中介绍了如何利用Mixin来封装一些常用的样式代码,以及如何使用这些Mixin来简化我们在编写CSS样式时的工作量。在这篇文章中,我将详细讲解这篇文章的完整攻略,帮助读者更好地掌握CSS中Mixin的使用方法。 什么是Mixin? 在介绍“CSS学习笔记之常用Mixin…

    css 2023年6月10日
    00
  • 总结js中的一些兼容性易错的问题

    总结JS中的一些兼容性易错的问题 在不同版本的浏览器中,JavaScript 解释器的行为会有所不同,从而导致一些可预见或不可预见的行为和错误。这些问题对于前端开发者来说是兼容性问题中最为棘手的部分。 因此,为了写出兼容性更好的JavaScript代码,我们需要了解JavaScript中的一些兼容性易错的问题。 1. 变量声明提升 在不同的浏览器中,变量声明…

    css 2023年6月10日
    00
  • vue.js引用背景图background无效的3种解决方案

    下面是关于“vue.js引用背景图background无效的3种解决方案”的完整攻略。 问题描述 在使用 Vue.js 进行开发时,我们通常会用到 CSS 中的背景图,但是有很多时候我们会发现,使用 background 属性来引入图片时,图片并没有被正确地引入,出现无法显示的情况。那么这个问题该怎么解决呢? 解决方案 方案一:使用 require 方法 在…

    css 2023年6月9日
    00
  • js实现的Easy Tabs选项卡用法实例

    下面是详细的js实现选项卡的攻略,包含了具体的实现过程、代码示例和注意事项。 js实现的Easy Tabs选项卡用法实例 简介 选项卡是一种经典的交互式UI组件,主要用于在有限的屏幕空间内展示多个内容区块。js实现的Easy Tabs选项卡就是其中的一种,比起使用CSS实现,使用js实现可以更加灵活,可定制性更强。 基本原理 js实现的选项卡主要原理是,通过…

    css 2023年6月11日
    00
  • CSS中margin和padding的区别浅析

    下面我将详细讲解“CSS中margin和padding的区别浅析”的攻略。 什么是margin和padding? 在CSS中,margin和padding除了width和height之外,属于最常用的两个属性。它们在调整元素的大小和位置时,扮演了至关重要的角色。因此,理解margin和padding的区别和使用方法是每个Web前端开发人员必备的技能之一。 m…

    css 2023年6月9日
    00
  • 简单实现js浮动框

    下面是我为大家提供的关于如何简单实现JS浮动框的详细攻略: 1. 准备工作 在开始实现浮动框之前,我们需要准备以下工作: 定义浮动框的样式; 定义触发浮动框的元素。 比如,我们可以如下定义浮动框的样式: /* 浮动框的样式 */ .floating-box { position: absolute; top: 0; left: 0; z-index: 999…

    css 2023年6月10日
    00
  • 海量经典的jQuery插件集合

    海量经典的jQuery插件集合是一个包含了大量优秀的jQuery插件的开源项目,可以帮助开发者更加高效地开发网页和应用程序。以下是详细的攻略: 1. 获取插件集合 首先你需要获取插件集合,可以通过访问GitHub项目页面来获取。在项目页面中有两种方式可以获取源代码: 克隆项目:通过Git工具在命令行中执行git clone https://github.co…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部