原文链接：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。

fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

relative相对定位元素的定位是相对它自己的正常位置的定位。

absolute绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

详情见原文

转：深入理解css中position属性及z-index属性的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  3. 理解CSS中position的各个值

    static position的默认值,没有定位,元素在normal flow中: fixed 相对于浏览器左上角定位: relative 相对定位元素,其位置根据其在normal flow中的位置来 ...

  4. 理解css中的position属性

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

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  8. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  9. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

随机推荐

  1. [转]Unity手游之路<十二>手游资源热更新策略探讨

    最近梳理了下游戏流程.恩,本来想写下,但是,还是看前辈的吧 版权声明: https://blog.csdn.net/janeky/article/details/17666409 上一次我们学习了如何 ...

  2. Android Launcher分析和修改6——页面滑动(PagedView)

    本来打算分析CellLayout的源码,不过因为它们之间是容器包含关系,所以打算先把PagedView分析.PagedView代码很多,今天主要是分析跟核心功能相关的代码.PagedView主要实现一 ...

  3. 【emWin】例程十五：触摸校准实例——五点校准法

    介绍: 该例程介绍如何校准4.3寸.7寸液晶显示屏.校准方法如下: 1.进入以下界面,用户可选择是否进入校准界面进行液晶校准 *点击屏幕任何地方可进入校准界面 *不采取任何操作,几秒钟后会进入触摸测试 ...

  4. centos 6.4 使用epel 源

    EPEL是RHEL 的 Fedora 软件仓库,把它添上,你就可以获得 RHEL AS 的高质量.高性能.高可靠性,又需要方便易用(关键是免费)的软件包更新功能.EPEL(Extra Packages ...

  5. AtomicLong.lazySet 是如何工作的？

    原文:http://www.quora.com/Java-programming-language/How-does-AtomicLong-lazySet-work Jackson Davis说:为一 ...

  6. Fixed Partition Memory Management UVALive - 2238 建图很巧妙 km算法左右顶点个数不等模板以及需要注意的问题 求最小权匹配

    /** 题目: Fixed Partition Memory Management UVALive - 2238 链接:https://vjudge.net/problem/UVALive-2238 ...

  7. Scala学习笔记——样本类和模式匹配

    1.样本类 在申明的类前面加上一个case修饰符,带有这种修饰符的类被称为样本类(case class). 被申明为样本类的类的特点:1.会添加和类名一致的工厂方法:2.样本类参数列表中的所有参数隐式 ...

  8. Ubuntu系统搭建SVN服务器

    Ubuntu系统搭建SVN服务器 参考地址:http://git.devzeng.com/blog/aliyun-ubuntu-svn-server.html 安装软件 依次在终端中执行下面的命令安装 ...

  9. [Optimization] Greedy method

    Given two sequences of letters A and B, find if B is a subsequence of A in thesense that one can del ...

  10. Win 10来袭，人工智能女将打头阵

    7月1日,微软小冰身"考官",其姐姐微软小娜(Cortana)解锁"科技动态"功能,为即将来临的Win 10打头阵. 中国IT产业界从来没有见过这样的阵势,难于 ...