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的更多相关文章

  1. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  2. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  3. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  4. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  5. [转]position:relative leaves an empty space

    本文转自:http://stackoverflow.com/questions/5229081/positionrelative-leaves-an-empty-space 在使用relative进行 ...

  6. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  7. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.

  8. "position:relative"在IE中的Bug

    当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变.根源就是子元素的"position:relative".目 ...

  9. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  10. [置顶] css 背景透明,文字不透明,alpha滤镜,opacity,position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

随机推荐

  1. Struts2之Result详解

    上一篇我们把Struts2中的Action接收参数的内容为大家介绍了,本篇我们就一起来简单学习一下Action的4种Result type类型,分为:dispatcher(服务端页面跳转):redir ...

  2. HTM5新手学习的一些日常总结,相互交流和相互学习。

    第一天 一.HTML--网页的源码(超文本标签语言) HTML标签 标签式是HTML最基本单位和最重要的组成. 使<和>扩起来 标签都是闭合的(规范) HTML标签属性 是标签的一部分,用 ...

  3. Troubleshooting OpenStack Bug- 每天5分钟玩转 OpenStack(162)

    这是 OpenStack 实施经验分享系列的第 12 篇. 问题描述 客户报告了一个问题:对 instance 执行 migrate 操作,几个小时了一直无法完成,不太正常. 问题分析 遇到这种情况, ...

  4. C风格字符串和C++ string 对象赋值操作的性能比较

    <<C++ Primer>> 第四版 Exercise Section 4.3.1 部分Exercise 4.2.9 习题如下: 在自己本机执行如下程序,记录程序执行时间: # ...

  5. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  6. Java引领新生活

    阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我觉得师生关系应当是亲密无间,课上老师讲解学生配合,课下师生交流启发思考. 你有什么技能(学习,棋类,球类,乐器,艺术,游戏,......)比大多 ...

  7. autoLayer:一基本布局

    我不会写博客,写的不好请物见怪,这个autoLayer我就直接上图了: 本人环境:IDE(Xcode6)SDK(IOS8) 准备工作:找一个横图psd(由于我不会切图,我只会简单的描述一下图片处理), ...

  8. 在NAS设备上用NFS服务为RAC数据库和集群件存储oracle文件时的mount选项

    今天在家折腾自己的小实验室,把自己NAS上的一个目录用NFS挂载到一套11g RAC的实验环境中. 当我在备份数据库到NAS上时,发现一个奇怪的问题,同样的目录下,默认backup 备份集的情况,备份 ...

  9. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 聊一聊Python与C++的不同(二)

    今天我们聊一下基本数据类型吧, 在学习c++的时候我们要记住几种数据类型,int,float,double,long,char,double,string,bool,每次使用都要明确定义每个数据类型, ...