CSS样式中的postion元素有四个属性，即static | absolute | fixed | relative。

static：

默认值。无特殊定位，遵循HTML基本定位规则 。

fixed：

固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px);

relative :

对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

absolute：

绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角。

将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>fixed和relative和absolute的区别</title>

<style type="text/css">

    body{color:black;}

    #static  {position:static;  left:100px;top:100px;width:100px;  height:100px;  border:1px solid black;}

    #fixed   {position:fixed;   left:100px;top:100px;width:100px;  height:100px;  background:red;}

    #relative{position:relative;left:100px;top:100px;width:900px;  height:900px;  border:1px solid blue;}

    #absolute{position:absolute;left:100px;top:100px;width:100px;  height:100px;  background:yellow;}

</style>

</head>

<body>

    <div id="static">默认static</div>

    <div id="fixed">fixed固定不变</div>

    <div id="relative">relative滚动

        <div id="absolute">absolute滚动</div>

    </div>

</body>

</html>

效果图:

其它文章

让div固定在顶部不随滚动条滚动【转】==>https://www.cnblogs.com/whatlonelytear/p/5571251.html

css postion 属性区别【原】的更多相关文章

  1. css的postion属性

    在实际项目中,发现postion这个属性经常使用而且常常很重要,所以总结整理一下知识点 css中postion属性有以下可选值,分别是:static,absolute, fixed, relative ...

  2. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  3. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  4. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  5. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  6. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  7. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  8. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  9. [转] CSS direction属性简介与实际应用 ---张鑫旭

    一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...

随机推荐

  1. 用Axios Element 实现全局的请求 loading

        Kapture 2018-06-07 at 14.57.40.gif demo in github 背景 业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为 ...

  2. SQLSERVER 2014 内存优化表相关

    更新了SP2的补丁能够解决  不能收缩日志文件的bug了. 但是因为已经不用内存优化表了, 所以想着能够删除内存优化表的file group 但是发现 很难删除 先说结论: 以下是针对内存优化文件组的 ...

  3. linux的LNMP架构介绍、MySQL安装、PHP安装

    LNMP架构介绍 和LAMP唯一不同的是,LNMP中的N指的是Nginx(类似于Apache的一种web服务软件).目前这种环境的应用也非常多.Nginx设计的初衷是提供一种快速.高效.多并发的Web ...

  4. 电梯间的谈话：3分钟快速回答CEO的问题

    想象一下,你在电梯里遇见了公司的CEO,他让你用3分钟来解释聚焦答案模式这个深奥的术语到底是什么意思.你可以这么说—— 为奠定一个正确的基调,让他酝酿好情绪听你说接下来的话,你可以这样开头: “总裁, ...

  5. 转载《ionic 热更新 cordova-hot-code-push》

    cordova-hot-code-push ,Cordova热代码推送插件提供了在应用程序中执行基于Web的内容的自动更新的功能.使用此插件可以更新存储在项目的www文件夹中的所有内容. cordov ...

  6. js break和continue

    break的兩種形式: break:未加標籤,適用於switch和循環結構 break labelname:適用於任何代碼塊: continue的兩種形式: continue:適用於循環結構 cont ...

  7. 02 基于umi搭建React快速开发框架(国际化)

    前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化, ...

  8. BZOJ3625 [Codeforces Round #250]小朋友和二叉树（生成函数+多项式开根）

    设f(n)为权值为n的神犇二叉树个数.考虑如何递推求这个东西. 套路地枚举根节点的左右子树.则f(n)=Σf(i)f(n-i-cj),cj即根的权值.卷积的形式,cj也可以通过卷上一个多项式枚举.可以 ...

  9. Minimum Cost POJ - 2516 （模板题 spfa最小费用最大流）

    题意: 人回家,一步一块钱,有x个人,y个房子,求能回家的最大人数且使之费用最小 解析: 就是....套模板,,,, 建图(⊙﹏⊙)...要仔细观察呐 对于人拆不拆都可以  都能过,,,,这里贴上拆开 ...

  10. hdu 5126 stars (四维偏序，离线，CDQ套CDQ套树状数组）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5126 思路:支持离线,那么我们可以用两次CDQ分治使四维降为二维,降成二维后排个序用树状数组维护下就好 ...