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. eclipse中mat插件使用

    http://smallnetvisitor.iteye.com/blog/1826434 User.java class User { private String id; private Stri ...

  2. java获取真实的ip地址

    直接上代码,获取请求主机的IP地址,如果通过代理进来,则透过防火墙获取真实IP地址 public class IPUtil { private static final Logger logger = ...

  3. PHP编译configure时常见错误

    PHP的安装虽然有时候很简单,可是如果应用一多,我们安装起来就很头痛了!出错最多的就是安装PHP扩展的时候了.其实不管是你是Apache类的应用还是Nginx类的,PHP的安装都不是很简单,虽然网上有 ...

  4. PHP 7的一些引人注目的新特性简单介绍

    1. ?? 运算符(NULL 合并运算符)把这个放在第一个说是因为我觉得它很有用.用法: ? 1 $a = $_GET['a'] ?? 1; 它相当于: ? 1 2 <?php $a = iss ...

  5. jQuery 数据操作函数

    函数 描述 .clearQueue() 从队列中删除所有未运行的项目. .data() 存储与匹配元素相关的任意数据. jQuery.data() 存储与指定元素相关的任意数据. .dequeue() ...

  6. Linux vi 文件编辑

    1.通过vi filename 进入编辑状态 2.退出 vi 编辑器 退出命令 说明 q 如果文件未被修改,会直接退回到Shell:否则提示保存文件. q! 强行退出,不保存修改内容. wq w 命令 ...

  7. db2 blob EMPTY_BLOB()

    --针对BLOG类型的列,写入一个0长度的字符串

  8. python3----字符串中的字符倒转

    方法一,使用[::-1]: s = 'python' print(s[::-1]) 方法二,使用reverse()方法: n = list(s) n.reverse() print(''.join(n ...

  9. 【转】火狐右键google搜索特别慢的解决办法

    原网页:http://www.fatalist.im/blog/459.html google将谷歌中文网站google.cn的搜索服务转向到google.com.hk(香港)后,firefox右上角 ...

  10. 解决erlang R17无法识别中文问题

    erlang更新到R17已有一段时间了.公司项目打算从旧版的erlang迁移到R17,却不料有不少的困扰,当中一个问题是中文问题. 这个问题非常easy重现:新建一个文件t.erl.保存为utf-8无 ...