在 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 基础类库】Prototype 原型版教学文章!

    前言 大家好我是:石不易,今天我为大家带来了PHP基础类库原型版的教学文章,至此本人的作品线已分为三大类,分别是:JavaScript前端框架(封装库).PHP模板引擎.以及PHP基础类库.该类库历时 ...

  2. 宝塔linux面板,修改root密码

    root,密码忘记了.但宝塔vps的密码没忘记... 翻完宝塔linux面板都没看到有修改系统root密码的选项,后来尝试定时任务shell,也没成功, 最终快绝望的时候,发现通过添加插件成功修改密码 ...

  3. 2018.9.3 CEP课程总结

    什么是CEP课程? 职业生涯规划课程 蓝桥介绍 立人达人 全人教育 人文 重视人 尊重人 关心人 爱护人 人才 人格 简历的制作 找工作的流程? 1.简历的准备------>投发简历(自己投.老 ...

  4. Spring boot 集成 Swagger

    添加依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  5. Java中阻塞队列的使用

    http://blog.csdn.net/qq_35101189/article/details/56008342 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如 ...

  6. fcn

    上几周把fcn跑了几个模型,唉,因此测试程序,整了很久,浪费时间啊. fcn做分割,其实我是想用来做检测的,但是总是觉得这个框架是以后的趋势,所以一直想要去在这个基础上做个东西,目前训练的模型还没有测 ...

  7. xpath模块

    W3School官方文档:http://www.w3school.com.cn/xpath/index.asp 我们使用xpath主要是获取网页数据的,之前一直是使用bs4,xpath也是最近了解到的 ...

  8. python基本使用时常见错误

    python基本使用时常见错误 字符编码错误 如果要学习计算机编程语言,首先就要搞懂字符编码,否则在以后的学习过程中,将会是一场噩梦.在一开始使用的时候,我就遇到了很多的关于字符编码的问题,做个简单的 ...

  9. Javascript入门笔记1-script标签

    1.script标签在HTML文件中添加JavaScript代码. JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript ...

  10. python解析ini文件

    python解析ini文件 使用configparser - Configuration file parser sections() add_section(section) has_section ...