在 css中, position 属性有四个值可用: static(默认值)、absolute、relative、fixed。

  relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置)

  absolute:

    1、相对于自身的包含块定位;
    2、寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块;如果没有的话,则相对于 html进行定位;
    3、完全脱离文档流;
    4、display的取值类似于inline-block;
    5、不缩短行框

  fixed:

    完全脱离文档流,和 absolute 的唯一的区别就在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动 

  说到 position,就要再说一下 [Z-index] (垂直定位)

  Z-index 默认值为0;这种情况下,后者会覆盖前者,需要改变元素之间层级关系的话,就要通过改变 Z-index 值来实现了,Z-index值越大优先级就越高。

浅谈 css 之 position用法的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  3. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  4. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  5. 浅谈css中的position

    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...

  6. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

  7. 浅谈css常用伪类用法

    着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; ...

  8. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  9. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

随机推荐

  1. Uva 11384 正整数序列

    题目链接:https://vjudge.net/problem/UVA-11384 题意:给定正整数 n,用最少的操作把序列 1,2,,,n 全部变成 0: 操作是:每次可以从序列中选择一个或者多个, ...

  2. Dijkstra单源最短路径,POJ(2387)

    题目链接:http://poj.org/problem?id=2387 Dijkstra算法: //求某一点(源点)到另一点的最短路,算法其实也和源点到所有点的时间复杂度一样,O(n^2); 图G(V ...

  3. Java继承和访问修饰符

    继承 概念:为了提取两个类中公共代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). 关键字     ext ...

  4. 2017.11.20 基于JSP+Servlet+JavaBean实现复数运算(一)

    (7)在Servlet中使用JavaBean Servlet和JavaBean都是类,在Servlet中使用JavaBean有两种方式: 1.在一个Servlet中单独使用JavaBean 一般完成的 ...

  5. alert、confirm、prompt的区别

    我们在开发一些后台管理系统的时候,经常会用到一些弹出框,今天我们一起看一下吧: alert:仅仅是一个提示的作用,通知用户,会阻线程,alert后面的代码,在用户点击确认后仍然会照常执行. confi ...

  6. jquery 表单事件

    .blur() 当元素失去焦点的时候触发事件. .blur(handler(eventObject)) handler(eventObject) 每当事件触发时候执行的函数. .blur([event ...

  7. Problem 1004-2017 ACM/ICPC Asia Regional Shenyang Online

    题目来源:array array array Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

  8. 用h+c实现天天生鲜首页

    网页效果图:http://www.dycun.cc/ 如下: css代码 main.css: /*因为大部分的字体都是12px,颜色一致, 所以统一设置下*/ body{ font-size: 12p ...

  9. Oracle客户端安装配置

    Oracle客户端安装配置.绿色版Oracle客户端配置使用PLSQL 安装Oracle客户端 准备工作,首先下载对应Oracle版本的客户端,这个可以去Oracle官网下载,加压完目录如下: 点击s ...

  10. 【CodeBase】PHP将数组键名转成变量名

    <?php /** * php 把数组中的键名所为变量名键值作为变量名 */ $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>5,'e'=> ...