原文链接：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. CINATRA发布第一个版本

    cinatra是什么? cinatra是C++开源社区–purecpp发起的一个开源项目,现在正式发布第一个版本cinatra0.9.0,cinatra是一个现代C++写的web framework, ...

  2. 在windows下执行./configure,make,makeinstall源码安装程序spice-gtk

    使用MSYS软件,在我的上一篇博客中有软件下载地址.本文使用MSYS进行源码编译spice-gtk-0.33. 首先打开MSYS软件,进入你源码所在目录,例如:cd  /c/Users/Admi... ...

  3. python 简单的server请求

    1.代码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # __author henry # __date 2018/11/4 from wsgiref ...

  4. windows python3.7安装numpy问题的解决方法

    我的是win7的系统,去python官网下载python3.7安装 CMD  #打开命令窗口 pip install numpy #在cmd中输入 提示 需要c++14.0, 解决办法: 1, 进入h ...

  5. SpringBoot自定义错误页面，SpringBoot 404、500错误提示页面

    SpringBoot自定义错误页面,SpringBoot 404.500错误提示页面 SpringBoot 4xx.html.5xx.html错误提示页面 ====================== ...

  6. 【代码审计】YzmCMS_PHP_v3.6 代码执行漏洞分析

      0x00 环境准备 YzmCMS官网:http://www.yzmcms.com/ 程序源码下载:http://pan.baidu.com/s/1pKA4u99 测试网站首页: 0x01 代码分析 ...

  7. [Python] pip 简明指南

    安装 1. 使用 apt 安装: $ sudo apt-get install python-pip 截止本文落笔,apt 安装 pip 版本为 1.0,但 pip 最新发行版本为 1.5.6 $ p ...

  8. Oracle中add_months()函数的用法

    查询当前时间1个月以前的时间: select add_months(sysdate,-1) from dual; 查询当前时间1个月以后的时间: select add_months(sysdate,1 ...

  9. Android 集成ShareSDK分享QQ或空间成功后，回调却不执行的原因

    AndroidMainifest.xml中的如箭头所示的id一定要与assets下ShareSDK.xml中配置的QQ的AppId一定要相同. 如下图

  10. 10.11 rbac权限

    2018-10-11 12:25:11 现在写代码时候,不要好多代码放在一块!注重解耦!!!!! 把权限放到中间件里面,每次访问的时候都用到! 自己的网站弄完了,博客网站已经正式上线,就是有点丑! w ...