CSS中应用position的absolute和relative的属性制作浮动层
我的浮动层结构大概如下:
<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的属性制作浮动层的更多相关文章
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中的大小、定位、轮廓相关属性
css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...
随机推荐
- 7.1SportsStore:Navigation and Checkout
准备示例项目 使用真实的产品数据 现在,要切换到使用真实的数据,从Deployd服务器获取. AngularJS通过一个叫做$http的服务,为Ajax请求提供支持.作者将在第三部分详细讲解它是怎么工 ...
- A Mysql backup script
UseCentOS can help IT managers to get rid of the boring learning methods, quick grasp Linux technolo ...
- 在CentOS之上搭建VMware Player 7
1.下载VMware-Player-7.1.2安装包 百度网盘下载地址: 链接:http://pan.baidu.com/s/1nudfo6H 密码:oemc 直接下载地址: https://down ...
- 更改MySQL数据文件目录位置
运维mysql,某些时候需要将数据文件更改到别的路径.以下介绍将mysql的数据文件从/var/lib/mysql迁移到/home/mysqldata/mysql下. 1.停止mysql $ serv ...
- linux进程调度方法(SCHED_OTHER,SCHED_FIFO,SCHED_RR)
转于:http://blog.csdn.net/maray/article/details/2900689 Linux内核的三种调度方法: 1,SCHED_OTHER 分时调度策略, 2,SCHED_ ...
- recycleview中使用checkbox导致的重复选中问题
参考博文:http://www.myexception.cn/mobile/1852852.html 在使用RecycleView做仿微信图片选择器,其中条目中使用了checkbox,在选中时由于ho ...
- android 6.0权限处理
在模拟器测试好的程序,运行在mate8上面一直崩,经多方查探才找到以下博文,方法还没掌握,但也算是找到原因了: http://***/article/android-6-0-runtime-permi ...
- Area(Pick定理POJ1256)
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5429 Accepted: 2436 Description ...
- Unity脚本在层级面板中的执行顺序测试2
上一篇测试了生成顺序对执行顺序的影响,链接:LINK 执行顺序测试3: LINK 这篇主要测试一下Awake,OnEnable,Start三个常用消息的循环顺序 1.测试消息循环顺序 先上一个最简单的 ...
- android 介绍0
Android (src res maifest) src ==>pacege==>类(后台代码) layout ==>界面 value ==>字符串 R类:layout ...