position relative
position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static)
如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。
absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的。
relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。
另:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。
position relative的更多相关文章
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- [转]position:relative leaves an empty space
本文转自:http://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space 在使用relative进行 ...
- css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
- IE7下position:relative的问题
如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.
- "position:relative"在IE中的Bug
当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变.根源就是子元素的"position:relative".目 ...
- 层模型--相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...
- [置顶] css 背景透明,文字不透明,alpha滤镜,opacity,position:relative;
都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...
随机推荐
- Eclipse-ee 启动Tomcat后浏览器无法访问Tomat,并且Web项目服务部署
环境: Ubuntu 14.04 + Eclipse-ee + Tomcat7 问题: 在Eclipse中建立Server时选择的Tomcat7,Server的运行时选择的时自己安装的Tomcat目 ...
- Ubuntu14.04: Error found when loading /root/.profile
问题描述: 启用root账号登录后系统出现如下提示信息: Error found when loading /root/.profile stdin:is not a tty 解决方法: 在终端中用命 ...
- C#中函数的功能和类型
函数 就是方法是独立完成某项功能的一个个体 函数的的三个好处:1.提高代码的重用性.2.提高功能开发的效率,3.提高代码的可维护性(主要功能). 函数也分为 固定功能函数(这类函数具有可封闭 ...
- CentOs下安装PHP环境的步骤
前言 在CentOs环境下安装php开发环境,需要首先安装一些源文件,然后使用yum命令直接安装即可,在Fedora 20 源中已经有了PHP的源,直接可以使用以下命令安装即可: # yum inst ...
- TuSDK 简易使用方法 持有图片对象方式
TuSDK 为涂图照相应用的SDK,打包后文件大小约为5M,缺点为包比较大,且图片清晰度较差一些,优点为直接可以引用滤镜贴纸,方便易用. 使用方法如下: 1.AppDelegate.m 中加 ...
- 【常见踩坑】USB调试安装失败(Installation failed with message INSTALL_CANCELED_BY_USER)
一.写在前面 最近一直在忙活着项目重构,忙活了一个多月(那是天天加班,不分昼夜呀,ps:这不是我司要求的哈),终于把沉积了三四年的老项目给重构了,目前在测试阶段,也总算有了点闲时来跟大家分享分享一些问 ...
- 理解云计算的(IaaS PaaS SaaS)
本文不经允许,不得转载! 云计算技术已经慢慢普及了.我们做技术的有必要学习云计算技术. IaaS:Infrastructure-as-a-Service(基础设施即服务)云计算到来之前,很多企业都是自 ...
- pom.xml配置文件配置jar(不用记,快速配置)
1:网址:http://mvnrepository.com/ 2:在搜索栏搜索要用的框架;例如spring *以下为示例
- php数组的使用
<?php echo "<h2>--------普通数组--------</h2>"; $arr1 = array(1,2,3,4); print_r ...
- Linux云自动化运维第二课
一.Linux系统结构 1.Linux是一个倒树结构.Linux中所有的东西都是文件.这些文件都在系统的顶级目录中"/","/"是根目录."/&quo ...