position属性

在css中,position属性用来控制元素的位置信息,其取值共有4种,即static、relative、absolute、fixed。

静态定位(static)

若没有指定position属性,则默认的position属性值为static,则所有poition属性值为static的对象将按照你所编写html标签的顺序依次呈现。

相对定位(relative)

该属性值仍然保持对象所在文档流的位置,即它与static所呈现的次序相同,与static属性不同的是,它可以通过top,left,right,bottom属性设定自己的新显示位置,这四个属性值是相对于该对象原来所在的位置。

绝对定位(absolute)

与relative定位不同的是,该属性值会将当前对象脱出文档流,后面的对象占有该对象原来所在的位置;与relative定位相似的是,他可以通过top,left,right,bottom属性重新设定自己的新位置,但该属性的取值不是相对于其最近的一个position值不为static的祖先元素的位置。

固定定位(fixed)

固定定位与绝对定位很相似,它同样会使得当前对象脱出文档流,也可以通过top,left,right,bottom属性重设自己的新位置,但是该属性的取值是相对于浏览器窗口,就如"fixed"的含义一样,是钉在窗口中的某一处,其位置固定,不会随着滚动条的拖动而发生改变。

z-index属性

如果说一个平面是由x轴和y轴所构成的一个平面,那么一个html页面就可以看成是一个由x轴、y轴和z轴所组成的一个页面,如图所示:

其中z-index所表示的就是该页面中元素在z轴上的高度,如图A元素的z-index值就比B元素的z-index值要大。但如果要体现z-index的效果也是有条件的,就是该元素的position值不为static(即为absolute、relative或fixed)。

http://www.cnblogs.com/roucheng/

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属性

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

  4. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

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

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

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

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

  7. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  8. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  9. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

随机推荐

  1. SSH在Jenkins中的使用

    我们今天在迁移Jenkins的时候又出现无法调用私钥来获取oschina的git代码和使用scp拷贝无法验证的问题.我发现主要的问题实际上是关于ssh的问题,因为git和scp都是通过ssh来实现与远 ...

  2. [Lua]50行代码的解释器,用来演示lambda calculus

    嗯,来写写经过: 在知乎上看见用Belleve牛用javascript写了一个精简的lisp解释器 => 我也想写一个,用lua写,能多简单呢? => 写了一个阉割的scheme解释器,包 ...

  3. 高吞吐量的分布式发布订阅消息系统Kafka--spring-integration-kafka的应用

    一.概述 Spring Integration Kafka 是基于 Apache Kafka 和Spring Integration来集成Kafka,对开发配置提供了方便. 二.配置 1.spring ...

  4. [GraphQL] Use Arguments in a GraphQL Query

    In GraphQL, every field and nested object is able to take in arguments of varying types in order to ...

  5. vmware 无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件

    点击“开始→运行”,在运行框中输入 CMD 回车打开命令提示符,然后依次执行以下命令. net start vmci net start vmx86 net start VMnetuserif sc ...

  6. CentOS安装keepalived

    Haproxy.Keepalived双主高可用负载均衡  1.安装keepalived yum install keepalived -y

  7. Linux设备驱动剖析之Input(四)

    static void input_pass_event(struct input_dev *dev, unsigned int type, unsigned int code, int value) ...

  8. iOS 基础复习

    silverlight知识点:linqToSQL.视图.存储过程.索引.触发器 数据结构:数组.栈.队列.链表.属.图. 排序算法:插入.选择.交换(冒泡).归并 网络开发:HTTP短连接.socke ...

  9. truncate/drop表非常慢,怎么办?用硬链接,极速体验

    这个这个,我必须花巨大篇幅,记录下今天清空表记录的英雄壮举,可知道一个drop操作,执行了一下午啊一下午,这是要急出翔的节奏..呵呵,下面开始 我的需求:某表因历史原因,积压了1亿条记录,约占360G ...

  10. mongo3.x ssl版安装文件

    搞c++好郁闷就是编译驱动.我都编疯了.虽然是按着教程走,但有时不同版本的机器有时各种奇奇原因莫妙奇妙编出问题.FQ出去啃英文解决的好吃力. 本来想更新一下项目的mongo从2.x 升级到3.x,然后 ...