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

<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. blade模版之页面的嵌套

    blade模版 相关关键词:@section @yield @extends @extends @show @parent(追加内容而不是覆盖) 父页面view\layout\f.blade.php ...

  2. javaWeb 使用 jsp 和 javaBean 实现计算器功能

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. java 调用grads 自动批量生成图片

    将 -lbcx 命令 后面的4个参数(gs文件名.参数1.参数2.参数3) 放在单引号里面就可以执行了.

  4. Asp.Net Web Api 2 实现多文件打包并下载文件示例源码_转

    一篇关于Asp.Net Web Api下载文件的文章,之前我也写过类似的文章,请见:<ASP.NET(C#) Web Api通过文件流下载文件到本地实例>本文以这篇文章的基础,提供了Byt ...

  5. java map 遍历

    转自http://rain-2372.iteye.com/blog/1615615 package com.spring.test_B11_aop1; import java.util.HashMap ...

  6. jquery.rotate.js库中的rotate函数怎么用。

    rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...

  7. html状态码与缓存学习

    当浏览器访问一个页面时,浏览者的浏览器会向网页所在的服务器发送请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求. ...

  8. [团队项目]----Math Calculator

    团队项目 ----Math Calculator 任务: 1.每个团队从Github上fork这个项目的源代码 https://github.com/RABITBABY/We-have-bing 2. ...

  9. Windows下Apache+mod_python+Django配置

    Windows下Apache+mod_python+Django配置 Apache 首先要安装Apache,我安装的版本是2.2.*: Python python肯定是要安装的,我安装的版本是2.5的 ...

  10. Codeforces Round #336 Zuma

    D. Zuma time limit per test:  2 seconds memory limit per test:  512 megabytes input:  standard input ...