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. Vue 组件6内联模板

    如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...

  2. Python 中，matplotlib绘图无法显示中文的问题

    在python中,默认情况下是无法显示中文的,如下代码: import matplotlib.pyplot as plt # 定义文本框和箭头格式 decisionNode = dict(boxsty ...

  3. MySQL获取Schema表名和字段信息

    MySQL获取Schema表名和字段信息 获取表名 select TABLE_NAME,TABLE_TYPE,ENGINE,TABLE_ROWS,TABLE_COMMENT,CREATE_TIME,U ...

  4. Yarn源码分析之参数mapreduce.job.reduce.slowstart.completedmaps介绍

    mapreduce.job.reduce.slowstart.completedmaps是MapReduce编程模型中的一个参数,这个参数的含义是,当Map Task完成的比例达到该值后才会为Redu ...

  5. Linux 进程创建一（system和fork）

    一:system系统调用 #include <stdlib.h> int system(const char *string); system函数传递给/bin/sh -c 来执行stri ...

  6. centos5/6/7下yum安装zabbix-agent(被控端)

    由于之前安装都是拷贝同事的zabbix_agent.tar.gz包,可是我在网上找了一大圈都没有找到这个tar包是从哪里来的,毕竟新手,太笨...so最后自己排错,找到了比较便捷的方式,直接通过yum ...

  7. aspx.cs方法设置webmenthod特性接收ajax请求

    cs代码: public partial class TelerikWebMethod : BasePage//System.Web.UI.Page { protected void Page_Loa ...

  8. iOS面试题--Model层--数据持久化储存方案

    数据持久化储存方案有哪些? iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 [NSU ...

  9. linux之shell常用命令介绍

    一.cd    切换目录 cd /etc  切换到/etc目录下              cd ~       切换到主目录下 cd  ..      返回上级目录                  ...

  10. Linux常用命令及Vim使用

    1.ls 命令 --------------------------------------------------------------------- ls以默认方式显示当前目录文件列表 ls - ...