js中Dom对象的position属性

首先应该明白什么是流?这个估计也很容易明白,我就不说了。顺便说下,float设置了这个属性就暂时脱离了流的存在,clear后才会到流里面。

position:absolute| fixed | relative| static | inherit

默认的HTML流属性其实就是指position:static。如果我们想要在页面上固定显示元素,就选择absolute,它是以页面左上角为(0,0),根据top,left,width,height来布局的,注意这里是根据页面布局。fixed是当前窗口布局,也是左上角为(0,0),不过,fixed是窗口布局,也就是说会根据滚动条一起移动,相对于当前窗口的位置不变。

relative相对位置,是指子节点和父节点的关系。当一个子节点在父节点中时,默认的position就是relative。在子节点包含在父节点中,这个时候就算你设置的是子节点是absolute,这是也会成为relative,也就是相对于父节点的左上角排版。这点其实也很容易理解,没有绝对,只有相对。HTML中所有的元素都是document的子元素。

接着详细说下各种的特点:

(1)static布局是默认,假如在这种布局,他是没有定位的,而且不会继承父元素的属性,W3C文档里面还说忽略 top, bottom, left, right 或者 z-index 声明,他是存在于流里面的。

(2)relative布局是相对布局,假如父元素用了这种布局,那么子元素就是相对于父元素的绝对定位,一般配合top,right,bottom,left来使用,这个布局也是存在于流里面的。

(3)fix布局是“浮动布局”,相对于浏览器窗口的绝对布局(在上下滚动页面时),一般配合top,right,bottom,left来使用,这个布局是脱离了流而存在的。(IE不兼容)

(4)absolute布局是绝对布局,相对于页面的绝对布局(在上下滚动页面时),一般配合top,right,bottom,left来使用,这个布局也是脱离了流而存在的。

(5)inherit布局我比较少用,文档里面他是规定应该从父元素继承 position 属性的值。

时间: 2024-08-04 09:33:32

js中Dom对象的position属性的相关文章

js中window对象的opener属性的一个坑

2018-05-08 17:48:33 今天我编写js代码时碰到了一个让我纠结了很久的小问题,在此记录一下当做笔记, 这个问题就是:在我自己写的子窗口中用opener属性却获取不到父窗口的window对象. 现在已经解决这个问题,请看下文 这是父窗口(windows.html)的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

swfupload js中 file 对象的属性

name=3cc68cfc60b87e6dd6887d8a.jpg modificationdate=Wed   Apr 21 15:48:30 UTC+0800 2010 filestatus=-1 post=[object   Object] type=.jpg index=0 size=29006 creationdate=Wed Apr 21 15:48:38 UTC+0800   2010 id=SWFUpload_0_0swfupload js中 file 对象的属性,布布扣,bub

DOM中document对象的常用属性方法总结

提要: 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 1.常见对象属性 document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设置页面背景色document.fgColor               //设置前景色(文本颜色)document.linkColor    

前端之JavaScript:JS之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

JavaScript基础15——js的DOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的DOM对象</title> 6 <script type="text/javascript"> 7 // DOM:Document Object Model 文档对象模型 8 /* 9 文档:超文本文档html.xml 10 对象:提供了属

关于JS读取DOM对象(标签)的自定义属性

DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为test的DOM元素添加了一个叫做adang的属性了,然后在js中,可以调用这个属性.我在写js的时候经常用到这种方法,可以很方便地对某个do

JS中DOM和BOM介绍

1. 什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window. JavaScript的组成:ECMAScr

js之DOM对象一

js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树) 二.DOM树 画dom树是为了展示文档中各个对象之间的关系,用于对象的导航. 三.DOM节点 1.节点类型 HTML 文档中的每个成分都是一个节点. DOM 是这样规定的:    整个文档是一个文档节点     每个 HTML 标签是一个