关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解:
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示
 
CSS中Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。
 
◆position:static 无定位
 
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
 
 
◆position:absolute 绝对定位
 
使用position:absolute,能够很准确的将元素移动到你想要的位置,
 
 
◆position:fixed 相对于窗口的固定定位
 
这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。
 
◆position:relative 相对定位
 
所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。

css中对position的几种定位方式的最佳诠释的更多相关文章

  1. position的四种定位方式:static、fixed、relative、absolute

    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ...

  2. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  3. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  6. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  7. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  8. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  9. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

随机推荐

  1. Python爬虫之requests库介绍(一)

    一:Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 ...

  2. 【SoDiaoEditor电子病历编辑器更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们

    为什么推荐的人这么少~~~~   更新(2017-4-18): 截止目前已知的已有2个三甲医院在使用该编辑器,容我内心澎湃以下,O(∩_∩)O哈哈~   先放github地址:https://gith ...

  3. 1.VBA 基本概念——《Excel VBA 程序开发自学宝典》

    1.1 常见对象及含义 对象名 含义 application 整个Excel应用程序 window 窗口 worksheet  一个工作表 sheets 指定工作簿的所有工作表的合集 shaperan ...

  4. 企业服务总线ESB

    # 企业服务总线ESB 由中间件技术实现并支持SOA的一组基础架构,支持异构环境中的服务.消息以及基于事件的交互,并且具有适当的服务级别和可管理性. 通过使用ESB,可以在几乎不更改代码的情况下,以一 ...

  5. 满帮集团CEO:未来将向“智慧型”公司转变,要成为一家生态公司

    谁都想成为下一个滴滴.显然,王刚也希望在物流业,货车帮与运满满在合并后,能够企及滴滴的高度. 货车帮与运满满,都曾是货运物流领域的翘楚,也因为业务的竞争关系有过水火不容厮杀.但最终还是在资本与地方政府 ...

  6. 转载----C/C++ 中 const 修饰符用法总结

    感谢原创作者,写的好详细.不忍错过,所以转载过来了... 原文地址: https://www.cnblogs.com/icemoon1987/p/3320326.html 在这篇文章中,我总结了一些C ...

  7. 关于inherit的笔记

    1. inherit是动态的 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. Scrum立会报告+燃尽图(Final阶段第六次)

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2485 项目地址:https://coding.net/u/wuyy694 ...

  9. VS AI 手写数字识别应用

    看过我上一篇文章的朋友应该知道,我用VS训练出了minst模型.output目录中有.pb文件. 关于.pb文件的介绍见[参考链接] (https://stackoverflow.com/questi ...

  10. 2-Fifth Scrum Meeting20151205

    任务安排 闫昊: 今日完成:设计本地数据库. 明日任务:请假.(最近代码写得多……很累……) 唐彬: 今日完成:ios客户端代码的了解. 明日任务:ios客户端代码的深度学习. 史烨轩: 今日完成: ...