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. Python内置函数之any()

    any()函数和all()函数相对立. 相同点为: any()也只能传入一个参数. any()的参数必须是可迭代对象. 不同点: 可迭代对象中只要有一个元素为True,返回值就是True. 下面看看具 ...

  2. Linux下同步模式、异步模式、阻塞调用、非阻塞调用总结

    转自:http://www.360doc.com/content/13/0117/12/5073814_260691714.shtml 同步和异步:与消息的通知机制有关. 本质区别 现实例子 同步模式 ...

  3. 使用Hyper-V安装Ubuntu16.04 Server 网络配置

    由于最近在研究Docker, 于是需要用到虚拟机,安装Ubuntu 16.04到Hyper-V并部署Docker.这个过程中填平了几个小坑,为了大家以后遇到类似情况节省时间,我将这几个小坑的问题和解决 ...

  4. 导入mysql文件提示“ASCII '\0' appeared in the statement”

    在windows服务器上导入mysql文件时,出现以下报错:ASCII '\0' appeared in the statement, but this is not allowed unless o ...

  5. redis常用数据类型 HyperLoglog

    1.HyperLoglog简介 HyperLoglog是redis新支持的两种类型中的另外一种(上一种是位图类型Bitmaps).主要适用场景是海量数据的计算.特点是速度快.占用空间小. 同样是用于计 ...

  6. 我的第六个java程序 spring-bean

    配置文件 Beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...

  7. 问题解决 —— Http Status 500

    在完成JavaWeb项目的过程中经常会出现这种错误 500:指的是服务器内部错误 通常遇到这种情况,我会去看控制台的信息,那里肯定会有提示,空指针(值没有传过去),或者java.sql.SQLExce ...

  8. makefile编写---单个子目录编译自动变量模板ok

    1.自动化变量通配符http://blog.sina.com.cn/s/blog_7c95e5850101b38l.html 2.wildcard 使用http://blog.csdn.net/lia ...

  9. IDEA15入门常用设置

    打开IDEA设置的快捷键:Ctrl + Alt + S 打开选中的项目属性快捷键:Shift + Ctrl + Alt + S 1.IDEA默认不会使用我们独立安装的Maven配置,需要手动设置,并且 ...

  10. 第4步：创建RAC共享磁盘组

    方法一:使用asmdevices(推荐使用,但不适用EMC Powerpath) )查看硬盘的SCSI号,两个机器认到的/dev/sda对应在实际的物理盘可能不是一块,但scsi号肯定是完全一致的. ...