在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示

![](https://img2018.cnblogs.com/blog/1709616/201906/1709616-20190620150705950-1472141249.png)

CSS中Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。
  1. position:static无定位

    1. 该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
  2. position:absolute绝对定位

    1. 使用position:absolute,能够很准确的将元素移动到你想要的位置,
  3. position:fixed相对于窗口的固定定位

    1. 这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。

    请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了

  4. position:relative 相对定位

    1. 所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。`

css中元素定位的更多相关文章

  1. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  2. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  3. 【基础】selenium中元素定位的常用方法(三)

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  4. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  5. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  7. 关于UI自动化中元素定位常用方法的个人总结

    1.如果目标元素有id属性,优先使用id定位: 2.元素locator尽可能保证简洁,考虑locator中路径的变化频率,尽量减少后期更新和维护成本: 3.使用xpath时,不要一味的使用‘/’逐层进 ...

  8. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

随机推荐

  1. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  2. 洛谷P3690 Link Cut Tree (动态树)

    干脆整个LCT模板吧. 缺个链上修改和子树操作,链上修改的话join(u,v)然后把v splay到树根再打个标记就好. 至于子树操作...以后有空的话再学(咕咕咕警告) #include<bi ...

  3. Eclipse里Maven配置

    简单记录一下,太特么困了,这几天天天加班很晚来着 : 选中.Apply and Close. 完成. 日他得,腰都快加断了……:) ---------------------------------- ...

  4. jQuery和vue 设置ajax全局请求

    一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...

  5. Redis介绍、安装、配置

    NoSQL介绍 NoSQL(NoSQL=Not Only SQL),意为反SQL运动,是一项全新的数据库革命性运动.指的是非关系型数据库,解决了传统的关系型数据库,难以解决的超大规模和高并发的的问题 ...

  6. Confluence 6 分享一个文件

    协同合作和编辑不仅仅是发生在页面中,很多时候你需要与你的项目小组针对文档,报告,图片,表格进行协同操作.不管是针对性的市场计划或者一个完整的项目计划,你可以在 Confluence 中让你的项目小组成 ...

  7. npm脚本编译代码

    echo offset codeUrl=D:\svn\oppo_mis\OCSS_NEW\Branches\ProjectCode20190909\h5_ocssset publishUrl=D:\P ...

  8. Python基础之格式化输出

    有一个需求,问用户的姓名,年龄,工作,爱好,然后打印成以下格式: -----------info of yangwei--------------- Name : yangwei Age : 22 J ...

  9. MessageListenerAdapter--消息监听适配器

    我们把之前的消息监听代码注释,可以不用直接加消息监听,而是采用MessageListenerAdapter的方式,我们来学习下如何使用默认的handleMessage,自定义方法名,自定义转换器. 适 ...

  10. oracle 中使用 pl/sql代码块

    1.写匿名块,输入三角形三个表的长度.在控制台打印三角形的面积. declare -- (p=(a+b+c)/2) --声明三角形的面积 三条边 的 v_a number (10,2):=&n ...