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

<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. 7.1SportsStore:Navigation and Checkout

    准备示例项目 使用真实的产品数据 现在,要切换到使用真实的数据,从Deployd服务器获取. AngularJS通过一个叫做$http的服务,为Ajax请求提供支持.作者将在第三部分详细讲解它是怎么工 ...

  2. A Mysql backup script

    UseCentOS can help IT managers to get rid of the boring learning methods, quick grasp Linux technolo ...

  3. 在CentOS之上搭建VMware Player 7

    1.下载VMware-Player-7.1.2安装包 百度网盘下载地址: 链接:http://pan.baidu.com/s/1nudfo6H 密码:oemc 直接下载地址: https://down ...

  4. 更改MySQL数据文件目录位置

    运维mysql,某些时候需要将数据文件更改到别的路径.以下介绍将mysql的数据文件从/var/lib/mysql迁移到/home/mysqldata/mysql下. 1.停止mysql $ serv ...

  5. linux进程调度方法(SCHED_OTHER,SCHED_FIFO,SCHED_RR)

    转于:http://blog.csdn.net/maray/article/details/2900689 Linux内核的三种调度方法: 1,SCHED_OTHER 分时调度策略, 2,SCHED_ ...

  6. recycleview中使用checkbox导致的重复选中问题

    参考博文:http://www.myexception.cn/mobile/1852852.html 在使用RecycleView做仿微信图片选择器,其中条目中使用了checkbox,在选中时由于ho ...

  7. android 6.0权限处理

    在模拟器测试好的程序,运行在mate8上面一直崩,经多方查探才找到以下博文,方法还没掌握,但也算是找到原因了: http://***/article/android-6-0-runtime-permi ...

  8. Area(Pick定理POJ1256)

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5429   Accepted: 2436 Description ...

  9. Unity脚本在层级面板中的执行顺序测试2

    上一篇测试了生成顺序对执行顺序的影响,链接:LINK 执行顺序测试3: LINK 这篇主要测试一下Awake,OnEnable,Start三个常用消息的循环顺序 1.测试消息循环顺序 先上一个最简单的 ...

  10. android 介绍0

    Android  (src  res  maifest) src ==>pacege==>类(后台代码) layout ==>界面 value ==>字符串 R类:layout ...