在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. jQuery方法介绍

    //jQuery与JavaScript在申明变量的区别: var $variable = jQuery对象 var variable = DOM对象 $variabl[0] //jQuery对象转换成 ...

  2. 关于C# Dockpanel的一些入门的基本操作

    关于C# Dockpanel的一些入门的基本操作 原文链接:https://blog.csdn.net/Lc1996Jm/article/details/51881064 一.引用: 1.建立一个Wi ...

  3. python---硬件序列号

    安装wmi : pip install wmi -i https://pypi.douban.com/simple 还要安装  pip install pywin32 import wmi c = w ...

  4. Codeforces Round #446 Div1 E

    题目大意 有n个数,进行k轮操作:随机一个i,让\(a_i\)减1,然后ans加上\(\Pi_{j\neq i}a_i\). 求ans的期望. 分析 发现,造成的伤害就是原来的ai的积减去k轮操作后的 ...

  5. java服务宕机原因查询

    背景 在java服务项目上线之后经常会出现宕机的情况 常见原因 内存溢出 1.查到服务进程号 [root@wms ~]# ps -ef|grep java root 6399 6069 0 08:57 ...

  6. if语句分析

    1.if语句的反汇编判断 if语句反汇编后的标志:     执行各类影响标志位的指令             jxx xxxx 如果遇到上面的指令,则很可能是if语句:   例如:     1.案例一 ...

  7. 【Python之路】特别篇--Bottle

    Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. Bottle框架大致可以分为以下部分 ...

  8. 一步一步理解线段树——转载自JustDoIT

    一步一步理解线段树   目录 一.概述 二.从一个例子理解线段树 创建线段树 线段树区间查询 单节点更新 区间更新 三.线段树实战 -------------------------- 一 概述 线段 ...

  9. Centos 7 安装 Xilinx SDSoC Development Environment

    1.CentOS版本信息 $ cat /etc/redhat-releaseCentOS Linux release 7.6.1810 (Core) 2.SDSoC下载地址: https://www. ...

  10. AcWing：144. 最长异或值路径（dfs + 01字典树）

    给定一个树,树上的边都具有权值. 树中一条路径的异或长度被定义为路径上所有边的权值的异或和: ⊕ 为异或符号. 给定上述的具有n个节点的树,你能找到异或长度最大的路径吗? 输入格式 第一行包含整数n, ...