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. hdu 2217 Visit

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2217 题目解释:起始位置在原点,给你固定的时间,让你左右跑,求在规定的时间内你最多能跑多少个点: 解决 ...

  2. 李洪强iOS开发之基于彻底解耦合的实验性iOS架构

    基于彻底解耦合的实验性iOS架构   这周我决定做一个关于彻底解耦合的应用架构的实验.我想探究的主题是: “如果所有的应用内通讯都通过一个事件流来完成会怎么样?” 我构造了一个待办事项应用,因为这是我 ...

  3. Chrome插件之一键保存网页为PDF1.1发布

    最新版本:V1.1 下载地址:http://download.csdn.net/detail/bdstjk/5722317 http://pan.baidu.com/share/link?sharei ...

  4. 常用校验算法CRC、MD5、SHA_转

    1.算法概述 数据摘要算法是密码学算法中非常重要的一个分支,它通过对所有数据提取指纹信息以实现数据签名.数据完整性校验等功能,由于其不可逆性,有时候会被用做敏感信息的加密.数据摘要算法也被称为哈希(H ...

  5. Tomcat运行流程

    Connector介绍 1.1 Connector的种类 Tomcat源码中与connector相关的类位于org.apache.coyote包中,Connector分为以下几类: Http Conn ...

  6. 【转】Silverlight全开源工作流设计器

    声明 此工作流是作者自行构思和设计的被动式数据触发模式的工作流.没有遵循各种现有的工作流设计标准(如WFMC或WSFL),也没有与其他工作流通用性的接口规范.这里体现更多的是作者对工作流的使用思想,及 ...

  7. Spring4 MVC+ AngularJS CRUD使用$http实例

    这篇文章显示了使用Spring MVC4整合AngularJS.我们将创建一个使用后端和AngularJS作为前端的纯JSP封装Spring REST API一个CRUD应用程序, 使用 $http ...

  8. Web 层由 Web，Web-MVC，Web-Socket 和 Web-Portlet 组成

    Web 层由 Web,Web-MVC,Web-Socket 和 Web-Portlet 组成,它们的细节如下: Web 模块提供面向web的基本功能和面向web的应用上下文,比如多部分(multipa ...

  9. 可以将化学结构NMR图谱这样导入Word

    在化学各个领域中,大家常常会用到ChemDraw化学绘图软件来绘制各种图形,ChemDraw因其出色的功能在全球范围内深受欢迎,但是一些用户朋友对于一些功能还不是很了解,需要通过一些教程来了解如何操作 ...

  10. 转载：tar 解压缩命令~

    转载自:http://blog.csdn.net/dunyanan1/article/details/38869059tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文 ...