我的浮动层结构大概如下:

<div id="father">

<div id="son">

</div>

</div>

要实现的是son层的浮动。

刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注。

但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位。

只要把本元素的position属性设置为:absolute,然后把父元素的position属性设置为:relative,那么本元素的left,top属性就是针对父元素的值了,而不是正对document窗口了。

本例中当father的position为relative时,son的position为absolute才有效。这时候son的left:0;top:0就不再针对document窗口了,而是针对id为father的这个div了。

参考网址:http://blog.csdn.net/redhat456/article/details/2574361

CSS中应用position的absolute和relative的属性制作浮动层的更多相关文章

  1. css中的position 的absolute和relative的区别(转)

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  2. css中的position:relative和absolute 属性

    语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...

  3. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  4. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  5. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  6. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  7. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  8. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  9. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

随机推荐

  1. TI CC2541的整体目标

    1. App端会发送一定数量的byte过来蓝牙, 每2个byte是一个汉字的编码. 2. 拿到汉字编码之后, 统计字符数量, 然后通过SPI, 搜索编码 3. 收到的编码, 每个汉字字符有32个byt ...

  2. Android 常用工具类之DeviceInfoUtil

    public class DeviceInfoUtil { private static WifiManager wifiManager = null; // wifi是否已连接 public sta ...

  3. IntelliJ IDEA---java的编译工具【转】

    转自:http://baike.baidu.com/link?url=sEpS0rItaB9BiO3i-qCdGSYiTIVPSJfBTjSXXngtN2hBhGl1j36CYQORKrbpqMHqj ...

  4. 使用Jconsole监控weblogic的配置方法

    在项目中发现full gc非常频繁.达到了每分钟13次.我怀疑可能会有内存泄露.于是在晚上找了内存泄露的资料. 内存长期占用并导致系统不稳定一般有两种可能: 1. 对象被大量创建而且被缓存,在旧的对象 ...

  5. Sqoop安装及操作

    一.集群环境: Hostname IP Hadoop版本 Hadoop 功能 系统 node1 192.168.1.151 0.20.0 namenode hive+sqoop rhel5.4X86 ...

  6. 工作上的C/C++相关

    LKSnapShot.h的line127某个类的声明中有: public: typedef TClient<LPeer, ACE_DEV_Connector> _TClient; 这种情况 ...

  7. Houdini Krakatoa Render Plugin

    HDK真实个混蛋,都懒得写个解释.凭着函数英文意思猜测.. plugin sample video: 在极其残忍的开发环境,"Particle Voxel Render" 产生了( ...

  8. android post请求

    参考文章:http://blog.csdn.net/lotusyangjun/article/details/22292445 http://blog.csdn.net/withiter/articl ...

  9. WinFormd多窗体 菜单和工具栏:

    一.多窗体 1.哪个是主窗体 主窗体就是如果关掉这个窗体,程序就会退出的那个窗体1问题:主窗体隐藏了,关闭其它窗体后,没有将主窗体显示/关闭,那么程序就关不上了 办法:构造函数传值,将窗体传到另一个窗 ...

  10. 循环嵌套,while循环,穷举迭代循环

    一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...