在 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. php session小节

    1.为什么要用session? 在人们访问网站的时候,有很多个网页,由于http自身的特点,用户每执行一个脚本都需要和web服务器重新建立连接.由于他们之间是无状态的,这次的连接无法得到上次连接的状态 ...

  2. Java UUID Generator(JUG)

    UG 是一个纯 Java 的 UUID 生成器. UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成UUID的API.UUID按照开放软件基金 会 (OS ...

  3. 【转】Android tools:context

    tools:context="com.example.guolin.scrollertest.MainActivity" 有时候可以看到有这个东西,但是从来没有用过,不知道有什么作 ...

  4. 2018.9.9 Tomcat是怎样运行的

    一. Servlet容器是怎样工作的 一个Servlet容器是一个复杂的系统.然而,对于处理对Servlet的请求,Servlet容器主要做三件事情: 1. 创建请求对象,并设置所调用的Servlet ...

  5. linq 和lambda查询

    EF 查询的两种 写法. linq 方法 或者 lambda方法 其中 ,只有tolist()的时候,才会真正的 在数据库中执行. 如果没有 tolist 方法,那么province1是 iqueab ...

  6. node.js 练习3 调用函数

    (1)创建n3-1.js,并输入代码 (2)创建User.js ,并输入代码 (3)运行cmd (4)在浏览器上查看 (5) 再次查看cmd

  7. 整合ssm集成框架

    第一步:配置pom.xml 该代码放在<dependencies>里面 <!--spring 所需要的jar包 web.aop.jdbc.webmvc--> <!--1. ...

  8. 返回用户指定页面的web服务器

    import socket import re import os def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求 ...

  9. iPhone 横屏时默认会放大文字的问题

    有人说用 html { text-size-adjust: 100%; }我发现这个并不能解决问题.下面代码可以完美解决. 添加标签:<meta name="viewport" ...

  10. win7同时安装python2和python3

    1.下载python2和python3版本. 2.安装python3   1>选择添加PATH路径到系统.   2>为所有用户安装python. 3.安装python2   1>为所 ...