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

<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. halcon学习笔记——机器视觉工程应用的开发思路【转】

    转自:http://www.cnblogs.com/hanzhaoxin/archive/2013/02/15/2912879.html 机器视觉工程应用主要可划分为硬件和软件两大部分. 硬件:工程应 ...

  2. Pro ASP.NET MVC 5 Framework.学习笔记.6.3.MVC的必备工具

    每个MVC程序员的军火库中,都有这三个工具:一个依赖注入(DI)容器,一个单元测试框架,一个模拟工具. 1.准备一个示例项目 创建一个ASP.NET MVC Web Application的Empty ...

  3. Hadoop集群管理之配置文件

    一.配置文件列表如下: [hadoop@node1 conf]$ pwd /app/hadoop/conf [hadoop@node1 conf]$ echo $HADOOP_HOME /app/ha ...

  4. 《深度探索C++对象模型》3

    第六章:执行期语意学 全局对象的初始化: 局部静态对象的初始化: 构建对象数组的vec_new()函数: 针对数组的new操作: placement operator new: 反聚合提高效率: 模板 ...

  5. hdwiki 在IIS 下的伪静态

    HDwiki有SEO设置的功能,此功能可以将HDwiki的页面进行URL静态化转换,从而使HDwiki内容更容易被搜索引擎挖掘,提高被收录的机率.注意事项        1.本功能对服务器环境有特殊要 ...

  6. 上传文件时,Request报文头不同浏览器会产生不同的content-type

    选择一个zip文件上传,用IE看的报文头是image/jpeg,用chrom看是application/octet-stream. 第一次遇到这个类型的content-type,百度了一下, octe ...

  7. xheditor上传图片配置

    二. 源码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Xeditor.a ...

  8. jsp:和属性相关的方法,请求的转发,重定向

    jsp中与属性相关的方法: 方法: void setAttribute(String name, Object o): 设置属性 Object getAttribute(String name):获取 ...

  9. CI分页,搜索之后翻页不能用问题

     最近在学习用php的CI框架写一个自己的CMS,遇到了些问题.其中一个就是CI分页的时候,我的URL带有其他参数,才能查出我想要的数据.于是我翻遍了谷歌度娘,终于找到了解决办法,和我想的差不多,就贴 ...

  10. 编写一个JAVA小程序取得IP地址

    在TCP/IP 互联网时,经常会需要查询自己主机的IP地址和www服务器的IP地址.虽然,我们可以使用IPCONFIG 和PING 进行IP地址查询,但是如果在应用程序或APPLET中使用此命令会破坏 ...