1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

Position属性四个值：static、fixed、absolute和relative的区别的更多相关文章

  1. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. Position属性四个值：static、fixed、relative、absolute的区别和用法

    1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...

  3. 前端定位Position属性四个值

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中. 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身 ...

  4. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  5. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  6. css中的position 的absolute和relative的区别（转）

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  7. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  9. css 布局absolute与relative的区别

    absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...

随机推荐

  1. codevs 3164 质因数分解

    3164 质因数分解  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description (多数据)给出t个数,求出它的质因子个 ...

  2. Ubuntu 16.04错误：正在读取软件包列表... 有错误！ E: Encountered a section with no Package: header E: Problem with MergeList /var/lib/apt/lists/ppa.launchpad.net_t-tujikawa_ppa_ubuntu_dists_xenial_main_i18n_Translatio

    错误: 正在读取软件包列表... 有错误! E: Encountered a section with no Package: header E: Problem with MergeList /va ...

  3. fetch各种报跨域错误,数据无法获取的解决方案

    1.介绍 fetch 提供了一个获取资源的接口 (包括跨域). fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 ...

  4. 在线文档分享工具 ShowDoc

    原文:https://www.oschina.net/p/showdoc https://www.showdoc.cc/

  5. 自己构建的Lumbda表达式

    自己构建的Lumbda表达式 定义接口: package com.stono.lambda; public interface Add { public void add(int x, int y); ...

  6. Hdoj 3697 Selecting courses 【贪心】

    Selecting courses Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 62768/32768 K (Java/Others ...

  7. python内置全局变量

    vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...

  8. protobuf入门

    ,step1:准备.proto文件 syntax = "proto3"; message gps_data { int64 id = 1; string terminalId = ...

  9. Estimating duration from bitrate, this may be inaccurate

    通过 ffmpeg  获取 媒体 播放时长 ./ffmpeg-linux64-v3.3.1 -i /tmp/mp30001.mp3 ffmpeg version N-86111-ga441aa90e8 ...

  10. YTU 2508: 武功秘籍

    2508: 武功秘籍 时间限制: 1 Sec  内存限制: 128 MB 提交: 1384  解决: 438 题目描述 小明到X山洞探险,捡到一本有破损的武功秘籍(2000多页!当然是伪造的).  他 ...