CSS布局模型 之 层模型(position的relative、absolute与fixed区别?)

简介:

  css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。


  浮动模型(Float)和层模型(Layer)有什么显著区别?

    浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动;浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452


  层模型(Layer):设置为层模型的元素已从文档流删除,在文档流上层一层层覆盖,写在后面的层模型元素会覆盖前面层模型元素,层模型元素的定位与文档流无关,只基于带有定位属性(relativeabsolute)的元素或视窗;


    position的relative、absolute与fixed区别?

  这三个定位属性是属于层模型的三种体现形式,另外任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框(有块级元素特性,但不占整行),而不论该元素本身是什么类型。

  使用区别  

  relative 相对定位,以自己当前处于文档流的位置为基准设置偏移量,所以自身在文档流会保持占有固定的物理空间,并且物理空间的位置只受文档流的影响,而不受自身设置偏移量(top/left这些)影响,注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。

  absolute 绝对定位,是相对于设置了position为relative或者absolute最近的父级元素定位(body、html标签也需要定位属性才能作为定位父级),如果没有就是基于视窗定位,不占文档流的物理空间。

  fixed 固定定位,是相对于浏览器视窗的,不占文档流的物理空间。










本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1958756,如需转载请自行联系原作者
目录
相关文章
|
11月前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
11月前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
WK
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
302 3
|
12月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
113 0
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
219 1
|
前端开发
css中px和em的区别
css中px和em的区别
142 0
|
前端开发
css中px和em的区别
css中px和em的区别
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
165 1
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
895 0

热门文章

最新文章