<div id="bigbox1">
    <div id="box1" class="box">box1</div>
    <div id="box2" class="box">box2</div>
    <div id="box3" class="box">box3</div>
    <div id="box4" class="box">box4</div>
</div>
<div id="bigbox2"></div>

1. 所有div为block, 且默认position:static

2. position: fixed

#box2 {

  position: fixed;

  right: 50px;

  bottom: 0px;

}

box2脱离文档流,相对浏览器窗口进行定位,拖动窗口,也保持右下侧的位置不变。z-index属性有效。

3. position: absolute;

#box3 {

  position: absolute;

  left: 30px;

  top: 100px;

}

box3 脱离文档流,相对于父级元素定位,若上级元素的position为fixed或absolute,则以上级元素进行定位,若不是,这看上上级元素是否为fixed或absolute, 若所有上级元素都不是,则以窗口进行相对定位。z-index属性有效。

4. position: relative

#box3 {

position: relative;
    right: 30px;
    bottom: 10px;

}

box3 没有脱离文档流,相对于自身原本的位置进行相对定位,移动位置后,原来的位置保持在原处。

css position static | absolute | fixed | relative的更多相关文章

  1. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  2. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  3. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  4. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  5. 【学习笔记】HTML position(static、fixed、relative、absolute)

    [本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">   ...

  6. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  7. CSS中应用position的absolute和relative的属性制作浮动层

    我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...

  8. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  9. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

随机推荐

  1. hadoop安装及配置入门篇

    声明: author: 龚细军 时间: -- 类型: 笔记 转载时请注明出处及相应链接. 链接地址: http://www.cnblogs.com/gongxijun/p/5726024.html 本 ...

  2. html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    例如:$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度,scrollLeft与此同理 scrollHeight: 获取对象的滚动高度. scrollLeft:该 ...

  3. mata属性

    声明文档使用的字符编码:    <meta charset="utf-8" />声明文档的兼容模式:         <meta http-equiv=" ...

  4. mysql 安装以及运行

    目录: http://www.fenby.com/courses/mysqlke-cheng-lian-zai/ 1.下载 2.配置 3.启动服务器 4.启用客户端并修改用户信息 1.mysql的下载 ...

  5. zookeeper学习系列:四、Paxos算法和zookeeper的关系

    一.问题起源 淘宝搜索的博客 http://www.searchtb.com/2011/01/zookeeper-research.html  提到Paxos是zookeeper的灵魂 有一篇文章标题 ...

  6. git clone带用户名和密码的方式

    git clone http://username:password@127.0.0.1/res/res.git

  7. Mac OS X下重启apache

    打开终端 重启apache:sudo /usr/sbin/apachectl restart 关闭apache:sudo /usr/sbin/apachectl stop 开启apache:sudo ...

  8. jenkins安装配置-白痴教程

    1. Maven安装 下载maven安装包,放置在usr/maven目录下:apache-maven-3.2.5-bin.tar.gz tar zxvf apache-maven-3.2.5-bin. ...

  9. docker定制化镜像的构建及基于该定制的镜像创建容器

    1.在项目里创建Dockerfile(注意大小写)文件,执行构建命令:docker build -t tiny-node-1 /root/tiny-node-docker    其中tiny-node ...

  10. 160809208沈昊辰c语言程序设计实验选择结构设计

    <C语言程序设计>实验报告 学 号 160809208 姓 名 沈昊辰 专业.班 计科16-2班 学    期 2016-2017 第1学期 指导教师 黄俊莲 吴喆 实验地点 C区二层机房 ...