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. JVM物理结构和在内存中的组织结构

    对于JVM自身的物理结构,我们可以从下图鸟瞰一下: JVM内存组成结构 JVM栈由堆.栈.本地方法栈.方法区等部分组成,结构图如下所示: 1)堆 所有通过new创建的对象的内存都在堆中分配,其大小可以 ...

  2. SHA信息摘要

    SHA算法是在MD4的基础上演进而来的,通过SHA算法能够获得一个固定长度的摘要信息.   SHA算法系列有SHA-1(也成为SHA),SHA-224,SHA-256,SHA-384和SHA-512这 ...

  3. HTTP 请求：GET vs. POST

    两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST. GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得(取回)数据.注释 ...

  4. Eclipse 创建 Java 接口

    打开新建 Java 接口向导 新建 Java 接口向导可以创建新的 Java 接口.打开向导的方式有: 点击 File 菜单并选择 New > Interface 在 Package Explo ...

  5. PHPCMS 前台移用地区联动数据

    在PHPCMS中,有时候需要建立模型有地区联动,这个联动数据在这前台调用显示呢?今天清源就给大家介绍一下! 地区联动菜单的缓存文件是  caches\caches_linkage\caches_dat ...

  6. POJ1365 Prime Land【质因数分解】【素数】【水题】

    题目链接: http://poj.org/problem?id=1365 题目大意: 告诉你一个数的质因数x的全部底数pi和幂ei.输出x-1的质因数的全部底数和幂 解题思路: 这道题不难.可是题意特 ...

  7. VC编译那些事儿

    转载自:http://blog.csdn.net/wowolook/article/details/8077153     最近又被ms的编译选译纠结了一下,运行程序是老是弹出0x14b1 or 71 ...

  8. Python 基础函数

    函数: 在程序设计中,函数是指用于进行某种计算的一系列语句的有名称的组合. 定义一个函数时,需要指定函数的名称并写下一系列程序语句.定义时不会执行,运行代码时,先加载进内存中,之后使用名称来调用这个函 ...

  9. 洛谷P1122 最大子树和

    P1122 最大子树和 题目提供者该用户不存在 标签动态规划树形结构 难度普及/提高- 通过/提交54/100 提交该题 讨论 题解 记录 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在 ...

  10. delphi小知识 点（if条件符，to_date）

    1.if条件 与:and 或:or 不等于:<> 等于:= 例子: if(j=1)and(nFH<>0) then begin tLCH:=Trim(copy(tSAMPLEI ...