<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1

        {

            width:400px;height:400px;background-color:red;position:relative;margin:100px;

        }

        #div2

        {

            width:100px;height:100px;background-color:gray;position:absolute;left:200px;top:200px;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oDiv1 = document.getElementById("div1");

            var oDiv2 = document.getElementById("div2");

            alert(oDiv2.offsetParent);

            //如果div1有相对定位，则，div2根据div1定位，如果div1，没有相对定位，则div2根据body相对定位。可以去掉相对定位，看一下alert出来的内容的区别

        }

    </script>

</head>

<body>

    <div>子类的position：absoulte;父类元素只有相对定位后，移动位置，子类才能跟着移动</div>

    <div id="div1">

        <div id="div2"></div>

    </div>

    <!--//总结一下Dom节点

        childNodes  nodeType   元素节点的 nodeType=1 文本节点的 nodeType=3  使用的时候是 对象.childNodes[i].style.background='red';

        children   都是元素节点  children[i].style.background='red'

        parentNode   parentNode.style.background="red"

        offsetPraent  获取元素在页面上的实际位置

        <有兼容性问题>子节点

        firstChild  firstElementChild

        lastChild   lastElemetnChild

        <有兼容性问题>兄弟节点

        nextSiblings nextElementSiblings

        previousSiblings  previousElementSiblings

        -->

</body>

</html>

　　

Javascript 绝对定位和相对定位的更多相关文章

  1. 关于HTML中，绝对定位，相对定位的理解...（学习HTML过程中的小记录）

    关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...

  2. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  3. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  4. css中绝对定位和相对定位的区别

    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...

  5. css中绝对定位和相对定位详解

    相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...

  6. 【CSS】绝对定位和相对定位

    html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...

  7. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  8. Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用

    1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...

  9. css中的绝对定位和相对定位（详解，总结）

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

随机推荐

  1. NFS网络操作系统介绍以及相关应用

    1. NFS服务简介 NFS是Network File System 的缩写,中文名称为网络文件系统,由Sun公司开发,功能是通过网络让不同的机器.不同的操作能够彼此分享数据,让应用程序在客户端通过网 ...

  2. Ubuntu下第一个C程序的成功运行

    对于每个新手来说,进入Ubuntu最想做的事莫过于在终端(Terminal)里运行自己的第一个C/C++程序"hello.c/hello.cpp"了. 很多语言书籍都是默认搭载好运 ...

  3. 比较不错的一个ios找茬游戏源码

    找茬游戏源码 ,这个是一款非常不错的ios找茬游戏源码,该游戏的兼容性非常好的,并且还可以支持ipad和iphone,UI界面设计得也很漂亮,游戏源码真的是一款非常完美,而且又很完整的一款休闲类的游戏 ...

  4. linux 安装sysstat使用iostat、mpstat、sar、sa(转载)

    使用yum安装 #yum install sysstat sysstat的安装包是:sysstat-5.0.5-1.i386.rpm,装完了sysstat-5.0.5-1.i386.rpm后 就会有i ...

  5. Linux磁盘与文件系统概念理解

    磁盘级别概念     这里讲的主要是网上所谓的老式磁盘,它是由一个个盘片组成的,我们先从个盘片结构讲起.如图1所示,图中的一圈圈灰色同心圆为一条条磁道,从圆心向外画直线,可以将磁道划分为若干个弧段,每 ...

  6. 《Java核心技术与最佳实践》读书笔记

    第一章 Java7新语法 1.switch中使用字符串 2.增加二进制表示0b10101010:数字字面量允许直径使用下划线12_34_90 3.一个catch字句捕获多个异常,多个异常之间用|分隔 ...

  7. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  8. 使用公司自己的maven服务器时，本地 maven 的配置方法

    使用公司的maven服务器,可以加速jar包的下载. 如果要使用公司的maven服务器,需要对本地maven配置文件conf/settings.xml做相应修改,具体改法有两种.   一.mirror ...

  9. （原创）LINUX_UNIX设计思想-读书笔记

    第一章 一.Unit哲学 1.小即是美 2.让每一个程序只做好一件事情 3.尽快建立原型 4.舍高效率而取可移植性 5.使用纯文本文件来存储数据 6.充分利用软件的杠杆效应 7.使用shell脚本来提 ...

  10. Delphi XE5教程6：单元的结构和语法

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...