rowIndex 可以获取 tr 相对于根节点所有 tr 的索引，会计算之前所有的 tr。 ? sectionRowIndex 可以获取 tr 相在当前 table 下的索引。...以下面的第二个 tr 为例，rowIndex 的值是 1，sectionRowIndex 的值是 0。 ? 这是网页的结构： ?...cellIndex 可以获取 th、td 相对于父节点的索引。 ?
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX...obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。...obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。...我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。...screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。 y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。...window.screen.availHeight; strInfo+="rn屏幕可用工作区宽度:"+window.screen.availWidth; window.confirm(strInfo); x:设置或者是得到鼠标相对于目标事件的父元素的外边界在...clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。...toElement 检索作为on mouseover或者on mouseout事件结果而移动的对象 type 检索事件对象中的事件名称 x 检索相对于父要素鼠标水平坐标的整数 y 检索相对于父要素鼠标垂直坐标的整数
需要注意的是，DIV和P这一对包含元素，都需要设置position为absolute才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上层定义过position的元素，直到整个文档； 2. posTop...posTop的数值其实和top是一样的，但区别在于，top固定了元素单位为px，而posTop只是一个数值(这一点可以通过alert(“top=”+id.style.top)和alert(“posTop...因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 event.clientX
获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index...的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1...('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('a:first') //选择网页中第一个a元素...//获取相对于文档的偏移 7、.offset() //获取相对于定位父元素的偏移 8、.position() //横向滚动条左侧的偏移 9、.scrollLeft()...//横向滚动条上侧的偏移 10、.scrollTop() //获取离它最近的父定位元素 11、.offsetParent()
参考别人写得比较明白的，红色部分为重点吧： 使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同...position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...offset()始终返回相对于浏览器文档的距离，它会忽略外层元素 下边看个简单的例子，这里外层的div元素(position:relative)仅一个： //获取相对于最近的父级(position:relative)的位置var vposition = $("#inner").position(); alert(vposition.left...event.offsetY 相对点击容器的垂直坐标 event.screenY 相对整个屏幕的垂直坐标 $(document).scrollTop(); //垂直滚动距离 $(XX).outerWidth
3.2 absolute 属性值 absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。...它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。...; } #son { position: absolute; top: 20px; } 上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移...3.3 fixed 属性值 fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 ?...页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。 五、 sticky 的应用 sticky定位可以实现一些很有用的效果。
接受选择器的当前坐标 2. position() 方法返回匹配元素相对于父元素的位置（偏移）注：只能获取不能设置 在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用...position:absolute来设置子元素相对于父元素的定位距离 l Position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。...具体区别为： 1、position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...offset()始终返回 相对于浏览器文档的距离，它会忽略外层元素。 ?...eq()方法返回被选元素中带有指定索引号的元素 索引号从0开始，因此首个元素的索引号是0而不是1 3 not（）方法返回所有不匹配的元素
; 滚动条中内容的高度：boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft...+padding+border) 获取元素的高度：offsetHeight;(height+padding+border) 获取元素最左边距已定位的父级对象的长度（若无父级对象或父级对象没有定位，就是距离文档顶部...）:offsetLeft 获取元素最上边距已定位的父级对象的长度（若无父级对象或父级对象没有定位，就是距离文档左端）:offsetTop 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽...(其值会受滚动条的影响，相当于整个文档，整个页面的Y的值) IE9之下并不支持这个属性 clientY： 鼠标相对于浏览器窗口左上角的偏移（其值不会受滚动条影响，相对于滚动条当前的位置的浏览窗口的...在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素，计算鼠标与其的偏移值， 以找到元素的border的左上角的外交点作为相对点。
，并且要给父容器设置相对定位，否则拖动元素将会自动相对于视图窗口定位 拖动元素默认宽高是200px w可以设置元素的宽，设置时不需要带单位，如果设置auto则为组件内部内容的宽度 h是高 x表示相对于父元素在...限制拖拽范围 如果不设置拖拽范围，可以在整个页面进行拖拽 可以使用parent-limitation限制只在父元素内拖动 也可以手动设置拖拽范围的宽高parentW,parentH //指定只在父元素内拖动...，当点击拖动元素时，可以传如此元素的索引，把此元素的层级设置为最高，其他的设置为最低 <VueDragResize...0 auto; } .drag{ border: 2px solid red; } 为什么要选择手写 鞋子合不合适只有穿过才知道，轮子能不能用，只有暴露出问题才知道 因为我们的项目不仅仅是用在电脑上的...,公众号后 台回复：拖拽 即可获取 进了前端门，便是一家人 原创不易,点赞、留言、分享就是大师兄写下去的动力!
()); JavaScript中： 获取坐标 getBoundingClientRect() ：获取元素相对于浏览器视口的的坐标，返回一个Object对象，有6个属性：top |...） offsetParent ：元素的偏移容器（父元素） offsetTop ：元素的相对垂直偏移位置（上边界距离可视区域最上边的距离） 事迹宽高 scrollHeight ：整个元素的高度（包括带滚动条的隐蔽的地方...position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。...若CSS box-sizing 为 border-box，将造成这个函数改变这个容器的 outerHeight ，而不仅是原来的内容高度。...浏览器相关宽高 $(window).height() ：获取浏览器可视窗口的高度； $(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window
em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。...② absolute absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。...最简化的CSS Reset CSS定义的权重 CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。...• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。...• fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。
# 3.2 absolute 属性值 absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。...它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。...定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。...# 3.3 fixed 属性值 fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。...页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。 # 五、 sticky 的应用 sticky定位可以实现一些很有用的效果。
举个例子，建筑师在设计房屋的时候，需要丈量开发地块的长度，以及每幢房屋相对于其他房屋的位置。 在css布局中，似乎也是这样开始的。我们也会去区分每个元素的尺寸和定位，力争完美的实现整个设计稿。...所以，我们的布局应该从定位和尺寸开始聊起 定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。...3、absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素) 4、fixed：元素框不再占有文档流位置，并且相对于视窗进行定位...2、absolute：它的偏移量是相对于最近一级position不是static的祖先元素的 3、fixed：它的偏移量是相对于视口的。 其实，这里说描述的内容，应该都是需要理解的。...：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。
，需要注意的是要有一个父容器来盛放拖动的元素，并且要给父容器设置相对定位，否则拖动元素将会自动相对于视图窗口定位拖动元素默认宽高是200pxw可以设置元素的宽，设置时不需要带单位，如果设置auto则为组件内部内容的宽度...h是高x表示相对于父元素在x轴上的初始偏移量y是在y轴上的初始位置引入好组件后，此时拖拽元素既可以拖拽，也可以缩放，可以使用isDraggable来控制是否允许拖拽，默认是true//禁止拖拽 <VueDragResize :w="100" :h="100
其参数主要有以下： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...(document)和(window)的差别（为了看得清楚，用了JQ写法） 相对于文档，就是相对于整个页面来进行布局，而相对于窗口，则是相对于浏览器的可视区域进行定位，这二者有本质的区别的。...从这个试验我们可以看出，当一个元素设置了position:absolute属性之后，而它的父元素的属性为position:relative则，它不再是相对于文档定位，而是相对于父元素定位。...如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。 这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。...如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。 本文为 FungLeo by FengCMS 原创，转载，请无比保留此申明！
，结果是一个数组，每个项即是元素的最近的定位祖先元素。...通过上面那张图，我们应该可以很清晰的看出，如果要将子元素设置到传入的coords.left的位置，那其实 父元素（假设父元素是定位元素）相对文档的左边距(parentOffset.left) 子元素相对父元素的左边距...需要注意的是如果元素的定位属性是static,则会将其改为relative定位，相对于其正常文档流来计算。 position 获取对象集合中第一个元素相对于其offsetParent的位置。...scrollLeft 获取或设置页面上的滚动元素或者整个窗口向右滚动的滚动距离。 scrollLeft: function (value) { if (!...，当然设置水平方向的时候，垂直方向还是要和之前的保持一致，所以传入了scrollY作为 scrollTop 获取或设置页面上的滚动元素或者整个窗口向下滚动的距离。
（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量 3.relative...（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的偏移量 4.fixed（固定定位），相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，...会在原来的位置上留下一个副本占用原来文档流的位置 2.absolute的父元素设有position时，top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位...，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响 3.absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative...定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式 其他 1.块状化 使用定位的元素的display计算值就是block或table 2.破坏性 脱离原始文档流 3.包裹性 absolute
~：获取当前元素的满足条件的兄弟元素*/ /*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素 1.相邻 2.必须是指定类型的元素*/ .first + li...border-right:1px solid #ccc; border-bottom:1px solid #ccc; } /*相对于父元素的结构伪类...在查找的时候并不会限制查找的元素的类型*/ /*下面这句样式查找：li的父元素中的第一个li元素 1.相对于当前指定元素的父元素 2.查找的类型必须是指定的类型...*/ /*1.也是相对于父元素 2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/ li:first-of-type{... 采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
领取专属 10元无门槛券
手把手带您无忧上云
