absolute的元素不会占据未浮动的元素的空间<html>
<head>
<style type="text/css">
.flipbox{
  width: 500px;
  height:500px;
  position: relative;
}
.sidea{
  height: 400px;
  width:500px;
  background: green;
}
.sideb{
  width: 100%;
  height: 100%;
  position: absolute;
  background: blue;
}
</style>
</head>
<body>
<div class="flipbox">
  <div class="sidea">side a</div>
  <div class="sideb">side b</div>
</div>

</body>
</html>

css position absolute 浮动特性的更多相关文章

  1. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  2. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  3. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  4. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  5. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  6. css position:absolute align center bottom

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS position relative absolute fixed

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

  8. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  9. css之absolute绝对定位（绝对定位特性）

    学习了绝对定位以后,对此进行一个总结,啦啦啦啦~ 绝对定位特性 1.破坏性 破坏了原有的位置,从文档流里脱离出来 2.包裹性 如果下面这种情况,父级元素将不会有高度和宽度,失去原有的大小

随机推荐

  1. iOS 学习笔记一【屏幕截图，并显示当前View】

    // 直接上代码: // // ViewController.h // 屏幕截图测试 // // Created by 博爱之家 on 15/11/11. // Copyright © 2015年 博 ...

  2. zookeeper安装笔记

    安装zookeeper,将zookeeper上传到三个服务器,保存在/usr/local/zookeeper目录下,解压tar包 tar -xzvf zookeeper-3.4.6.tar.gz 进入 ...

  3. E - Leading and Trailing 求n^k得前三位数字以及后三位数字，保证一定至少存在六位。

    /** 题目:E - Leading and Trailing 链接:https://vjudge.net/contest/154246#problem/E 题意:求n^k得前三位数字以及后三位数字, ...

  4. .net版本和操作系统

    转自: http://msdn.microsoft.com/zh-cn/library/bb822049(v=vs.110).aspx 服务器操作系统 包括 还可以安装 Windows Server ...

  5. Mary的加盟

    Mary的加盟 1995年早些时候,我们招收了一个合同编制员——Mary Campione.她和我在后来的工作互助中相识.Mary的工作是帮助程序员使用平台特色如线程.我们很快意识到我们的工作如此相似 ...

  6. python django -2 ORM模型

    ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库 ORM是“对象-关系-映射”的简称 ...

  7. diamond源码阅读-diamond-server

    diamond-server 1 增加一条数据 /diamond-server/admin.do?method=postConfig 1.1 调用 this.configService.addConf ...

  8. js yield

    meikidd 发布在meikidd2015年5月6日view:3397 在文章任何区域双击击即可给文章添加[评注]!浮到评注点上可以查看详情. 隐藏标注 首先请原谅我的标题党(●—●),tj 大神的 ...

  9. MySQL右连接

    1.语法:select 字段列表 from table1 别名1 right join table2 别名2 on 连接条件 [where 子句]

  10. Linux基础分析

    1.系统目录 [root@15b883 ~]# tree -L 1 / ├── bin 常用二进制命令所在的目录 ├── boot 内核及系统引导程序所在的文件目录 ├── dev 设备目录 ├── ...