获取子元素相对于侧视口中的位置
可以使用JavaScript中的getBoundingClientRect()方法。该方法返回一个DOMRect对象，包含了元素的位置信息，包括左边距（left）、上边距（top）、右边距（right）和下边距（bottom）。
使用getBoundingClientRect()方法可以计算出子元素相对于侧视口的位置，可以通过以下步骤来实现：
- 首先，获取到需要获取位置的子元素的引用，可以使用document.querySelector()或document.getElementById()等方法来获取元素的引用。
- 然后，使用getBoundingClientRect()方法获取子元素的位置信息，将其赋值给一个变量，例如rect。
- 最后，可以通过rect对象的属性来获取子元素相对于侧视口的位置信息，例如rect.left表示子元素相对于侧视口左边的距离，rect.top表示子元素相对于侧视口顶部的距离。
获取子元素相对于侧视口中的位置可以用于实现一些与元素位置相关的功能，例如判断元素是否在可视区域内、实现滚动到指定位置等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云计算产品：https://cloud.tencent.com/product
- 云原生产品：https://cloud.tencent.com/product/cns
- 人工智能产品：https://cloud.tencent.com/product/ai
- 物联网产品：https://cloud.tencent.com/product/iotexplorer
- 移动开发产品：https://cloud.tencent.com/product/mobapp
- 存储产品：https://cloud.tencent.com/product/cos
- 区块链产品：https://cloud.tencent.com/product/baas
- 元宇宙产品：https://cloud.tencent.com/product/tgus
相关·内容
2回答
我对CSS中的绝对位置和相对位置感到困惑。
<div id="container" style="position:"relative">
<button style="position:"absolute"; left:10px;" >
</div>
在上面的例子中，当我将位置设置为绝对位置，并将左侧设置为10px to button时，意味着它不会从浏览器窗口获取位置。相反，它从父div (容器)获取位置，因为容器位置是相对的。为什么？
当我将绝对位置设置为任何元素时，它
浏览 1提问于2013-06-20得票数 1
1回答
子窗口定位
、、
我知道以前有人问过这个问题()，但我还不能正确地实现。我试图让一个子窗口相对于父窗口中的控件打开。到目前为止，我有这个；
messageWindow = new Message(true);
Point relativePoint = btn1.TransformToAncestor(this).Transform(new Point(0, 0));
messageWindow.Left = relativePoint.X;
messageWindow.Top = relativePoint.Y;
messageWindow.Show();
现在，虽然这确实会影响子窗口(messageWind
浏览 7提问于2012-06-27得票数 2
回答已采纳
从侧面看，我指的是摄像机面对垂直于街道和面向沿街的人行道的图像。一个例子是这样的图像：
目前，我一直在使用指南针显式地测量每条街道的航向参数，这允许我获得侧视图图像，但这是不可缩放的。Google是否有某种方式设置这个“侧视图”布尔值，或者是否有现有的实现可以动态地返回所需位置的标题以实现侧视图？这似乎是一种常见的用例/请求，因此必须有一种方法，而不是手动为每个地址手动设置标题。
到目前为止，这里是我的代码，您可以看到我正在为街道视图请求设置一个“标题”参数(这是一个介于0到360之间的数字)，但是我不想每次都要手动这样做。
import urllib, os
myloc = "/
浏览 5提问于2017-05-12得票数 1
回答已采纳
<div class="nodelevel1">
<div class="nodelevel2">
<div class="nodelevel3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
浏览 0提问于2018-03-09得票数 0
3回答
是否可以使来自子的宽度大于来自父DIV的“宽度”.(只包含css )
有关更多细节，请参见以下示例：
<div id="main">
<div id="sidebar">DIV1
<div id="sidebar_2">DIV1 Sub</div>
</div>
<div id="page-wrap">DIV2</div>
</div>
#main
{
display: bloc
浏览 2提问于2013-03-25得票数 1
如何将基于主窗口得到的点转换为MainWindow中的一个面板。
假设一个鼠标指针是基于MainWindow获得的，我需要知道基于同一窗口中的另一个面板的相同的点。
有什么想法吗？
浏览 0提问于2013-04-27得票数 0
回答已采纳
我想把UIElement的位置属性设置为X和Y的绝对值。我怎么做这个操作？为什么UWP的绝对定位这么难？
浏览 2提问于2016-02-01得票数 8
我试图用这段代码得到一个元素的顶部偏移量，但它不起作用，每次都得到相同的位置，即108，而且不改变，尽管页边距顶部只有100 is。
$(function() {
$(window).scroll(function() {
var container= $("#container");
console.log(container.offset().top);
});
});
HTML代码：
<div id="container" style="float: l
浏览 3提问于2014-09-19得票数 0
回答已采纳
4回答
我目前正在用javascript编写一个简单的游戏。游戏在一个名为# div的游戏中进行。而敌人是一个叫做“敌人”的div。
<div id="box">
<div id="prepend">
<div id="hero"></div>
</div>
<div id="enemy"></div>
浏览 3提问于2013-04-16得票数 1
回答已采纳
有一个窄的DIV，它包含一个宽得多的DIV。如何在浏览器窗口中水平居中子DIV (而不是父DIV)，使左右边距相等？
<div id="narrow_container" style="float:left;">
<div id="wide_contents">
</div>
</div>
浏览 0提问于2011-05-05得票数 1
回答已采纳
我正在制作一个网页，在内容的<div>周围有一个嵌入边框的反复设计元素。嵌入边框是用更少的/CSS完成的，它本身是放置在内容后面但在包装器中的一个<div class="inset-border">。
这是一种对几乎整个页面都很有效的方法。但是，有一段边框不是从父包装器继承其维度，而是继承曾祖父元素。为什么？
为边框呈现的CSS：
.inset-border {
border-style: solid;
border-color: #ffc174;
border-width: 1px;
height: 90%;
width: 90%;
浏览 3提问于2017-05-04得票数 1
回答已采纳
我无法让页面底部的“捐赠”后面的橙色背景在较大的浏览器窗口中保持不动。我已经尝试了我能找到的每一个css技巧。请帮帮我！
谢谢，珍妮特
浏览 3提问于2014-03-12得票数 0
tkinter MouseWheel事件只能绑定到根窗口。因此，事件位置也是相对于根位置的。对于画布缩放操作，我希望获得鼠标滚轮事件，其中包含有关画布中光标位置的信息。为了计算这个值，我想我可以简单地减去画布在根窗口中的位置。现在的问题是，我找不到画布在窗口中的位置。
我试过了: can.grid_bbox --> (0,0,0,0)？can.grid_info can.grid_location cget("offset") pointerx
还有一些我记不起来的。不知何故，我一直在错过它，有人能给我一个提示吗？
-edit-要获取mouseWheel事件相对于画布的位
浏览 0提问于2011-05-03得票数 3
回答已采纳
2回答
我有一个简单的导航栏与HTML列表。
最初的结构是这样的：
<div id="menu">
<nav>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Inbox</a></li>
<li><a href="#">No
浏览 1提问于2013-07-03得票数 0
回答已采纳
这是我在中的代码
这里我有一个演示div，如果我选择菜单产品，它应该总是选择子菜单开始，就像上面的演示div的开始点。
这是我的密码。
子菜单的CSS代码：
ul li ul {
display: none;
width: 300px;
position: absolute;
left: 0;
margin-left: 8px;
}
我的代码里有没有漏掉任何东西。
浏览 2提问于2014-07-17得票数 0
回答已采纳
假设我在div中有一个元素(或任何其他包含元素，或者可能只是在文档体中)。如何获得该元素相对于其容器的(x，y)坐标？
我需要能够用纯Javascript来完成它。
浏览 0提问于2011-07-22得票数 5
回答已采纳
5回答
我正在尝试在滚动窗口中居中显示一个模式对话框。此模式是绝对位置，因为必须在屏幕上可拖动。我使用这个插件来实现可拖动的功能：
我的问题是，这个模式有绝对的位置，如果我把顶部: 50%它显示在中心窗口，但没有考虑所有滚动窗口。
浏览 3提问于2012-09-26得票数 7
我有一个以这种格式收集的元素：
<div class="row feed">
<div class="col-sm-4 inner"><span></span></div>
<div class="col-sm-4 inner"><span></span></div>
<div class="col-sm-4 inner"><span></span></di
浏览 7提问于2015-12-30得票数 1
回答已采纳
5回答
我正在尝试创建一个水平100%堆叠的条形图使用HTML和CSS。我想使用DIVs创建具有背景颜色和百分比宽度的条形图，这取决于我想要绘制的值。我也想有一个网格线，以标记沿图表的任意位置。
在我的实验中，我已经通过分配CSS属性float: left来使条水平堆叠。然而，我想避免这种情况，因为它似乎真的以令人困惑的方式扰乱了布局。此外，当条形图浮动时，网格线似乎不能很好地工作。
我认为CSS定位应该能够处理这个问题，但我还不知道如何做到这一点。我希望能够指定几个元素相对于其容器左上角的位置。我经常遇到这种问题(甚至在这个特定的图形项目之外)，所以我想要一个方法，它是：
跨浏览器(理想情况下没有太
浏览 165提问于2008-09-19得票数 194
回答已采纳
1回答
是否可能获得可拖放元素的margin-left、right、top和bottom？例如，我找到了，这说明了我的意思。这里的问题是，它只给出您的子元素的位置(以像素为单位)。left: 100px; top: 40px;。
在同样的例子中，我需要它来计算百分比的差额。margin-left: 20%; margin-top: 10%;。我需要让div进入最后的位置。
在JS/jQuery中可以这样做吗？我找不到如何做到这一点的任何例子，我也不知道如何做到这一点，所以我希望你们能搞清楚。
因此，最终的结果应该是，如果我计算了右边的边距百分比，以像素为单位的div和以百分比表示的位置的div应该在父
浏览 4提问于2019-10-07得票数 0
回答已采纳
4回答
我有这样一段代码，我真的不明白它为什么会起作用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#divWraper
{
浏览 0提问于2010-02-04得票数 0
回答已采纳
div1.innerHTML = "ab ab ab ab ab";
#div0 {
position: absolute;
}
#div1 {
position: absolute;
width: auto;
}
<div id="div0">
<div id="div1"></div>
</div>
div1中的文本将在空白处中断。Div1将是一个狭窄的宽度和较长的高度。
如果div 1的位置设置为静态、相
浏览 0提问于2019-08-19得票数 0
回答已采纳
1回答
更新:我已经尝试了几次，但都没有用！到目前为止，在我的jsfiddle中我有我的工作。
下面是用于“居中”"home“div的代码。看着它，我意识到它并不知道"home“div当前所在的位置，因此它盲目地根据视图中原点位于左上角的数组进行移动。
container.overscroll({
showThumbs: false,
scrollLeft: 1125,
scrollTop: 1125
});
// Center "home" div in viewport
var gear = $('#gear
浏览 0提问于2012-01-26得票数 0
回答已采纳
2回答
我会尽我所能解释我的情况。
我有一个网站，它显示的DIV区块列表与信息在里面。使用宽度创建了3个DIV块:33%
在这个div块中，我想要另一个隐藏的div块，它与前一个div块完全相同。
所以我有这样的东西..。
<div class="columnParent">
<div class="columnChild">
"Various stuff here that overlaps parent DIV"
</div>
"Various
浏览 3提问于2013-08-10得票数 1
3回答
我正在与css代码斗争，以获得一些应该非常容易的东西:在同一个页面的多个div底部添加一个三角形。
这是我正在处理的代码：
.areatitolo {
background-color: #bb0000;
color: #fff;
font-size: 18pt;
font-weight: bold;
text-align: center;
padding:5%;
margin-top:100px;
width:100%;
margin-bottom:60px;
}
.areatitolo:after{
cont
浏览 2提问于2018-10-31得票数 0
回答已采纳
我需要将一个元素与它的“祖父母”的边缘对齐。
以下是代码的一个示例：
<div id='grandparent'>
<div class='parent' style='display:inline-block'>
<div class='child'></div>
</div>
<div class='parent' style='display:inline-block'>
<div cla
浏览 0提问于2013-04-10得票数 5
回答已采纳
这应该很简单，我读到的所有内容都表明select = "name“应该选择xml文档中具有"name”的所有节点。所以我试着做一个简单的例子..这是XML：(这是一个简单的清单应用程序)。
<?xml version="1.0"?>
<inventory type="inventory">
<item type="zone" CanAdd="true">
<title>Building</title>
<item type="
浏览 0提问于2012-08-08得票数 1
回答已采纳
jQuery提供具有上值和左值的position函数。香草javascript都有getBoundingClientRect()
我不知道他们之间的区别。
当我检查的时候，这是价值差异。
getBoundingClientRect()
如何将jQuery的position转换为getBoundingClientRect。
如你所见，x是236，左是200。
浏览 1提问于2018-12-04得票数 1
回答已采纳
4回答
我有一个位置“固定”的div，我希望在用户向下滚动页面时，获得其位置相对于整个文档的值。
因此，假设我将div放在(x=0，y=0)上，然后用户向下滚动，现在相对于文档，div是on (X=0，y=300)。我想要得到这些信息，我想知道这个div在每一刻的确切位置，再次，相对于整个文档，而不是窗口或浏览器。
我尝试过很多事情，但似乎什么也没有得到我想要的。
其中之一是这样的代码，，它在固定的div中不工作。
var position = $("#fixed").offset(); /*it gets the position of the div
浏览 1提问于2012-03-02得票数 16
回答已采纳
2回答
我总是看到这样的代码：
#container {
background:#000000 none repeat scroll 0 0;
display:block;
overflow:hidden;
position:relative;
width:100%;
}
我认为位置相对是为了适应div相对于它的父元素，使用CSS属性left、right、top和bottom (px)。像下面的例子一样单独使用它有什么意义？哪些其他属性受到相对位置的影响？
浏览 2提问于2009-12-21得票数 3
回答已采纳
假设我有一个容器，我想把这个容器放到另一个容器中，这个容器也装满了其他东西。CSS代码可能如下所示：
.parent-container {
width: 100%;
position: relative;
}
.child-container {
width: 600px;
position: absolute;
left: 25px;
bottom: 100px;
}
然而，.child-container还包括绝对定位的元素，这些元素相对于.parent-container是位置的，因为.child-container没有position:
浏览 2提问于2013-08-28得票数 1
回答已采纳
我正在学习和研究一些最受欢迎的网站的HTML/CSS代码，我刚刚发现在大多数网站中都有“位置:相对”属性，而没有通常的顶部、左、右、底部属性。
这在某种程度上影响了页面流，还是类似于静态属性？
浏览 3提问于2017-01-09得票数 0
1回答
我正在使用flex的属性和位置，我发现了一些东西。 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.mainContainer {
margin: 10vh auto;
width: 80vh;
height: 80vh;
/* display: flex; */
justify-content: center;
/* align-items: center; */
border: 1px solid red;
/* positi
浏览 160提问于2021-10-20得票数 1
我有一个类似的结构：
<div style="border: 1px solid red; position: relative; height: 200px">
<div style="border: 1px solid green; position: absolute; left: 10px; top: 10px;height: 100px; width: 200px ">
<div style="border: 1px solid blue; position: absolut
浏览 1提问于2017-02-20得票数 0
回答已采纳
我正在处理一个动态的工具提示...我被困在如何才能让#MyAuction-BidHistory的底部位置出现在我的链接a.my-auction-history上方
到目前为止，我的代码如下：
var linkOffset = $('a.my-auction-history').offset().top;
$('.my-auction-history').mouseover(function(e){
$.get('/auction/includes/new-bidhistory.asp?lplateid=' + pLis
浏览 0提问于2010-11-26得票数 0
回答已采纳
2回答
我的Reactive原住民应用程序中有以下代码：
<View
style={{
width: 50,
height: 50,
borderWidth: 1,
}}
>
<View style={{
width: 5,
height: 5,
backgroundColor: 'red',
top: 10,
left: 10
}}></View>
</View>
正如预期的那样，这样做的结果是：
但是，如果我将top交换为bottom，则会得到以
浏览 1提问于2020-01-06得票数 0
回答已采纳
我有一个垂直长的SVG图像，我需要滚动到具有特定id的特定元素。
const el = document.getElementById(id);
el.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
这在chrome中很好，但是Firefox会滚动到SVG文件的顶部，而不是选定的元素。
我在一次堆栈闪电战中复制了这个错误：
在chrome中，#热板元素被移动到中间，而在firefox中，SVG的顶部被移动到中间。
尝试更改center，使用start和end来查看效果。
有办法解决/避
浏览 2提问于2019-08-22得票数 5
回答已采纳
2回答
我在弹出窗口中定位图像(箭头)时遇到了很多问题。使用相对于框的定位，我不能将img移动到正确的位置。
因此，我尝试了绝对，或者更确切地说，将div放在div中(摘录如下所示)。
<div style="position:relative;top:0px;bottom:500px;left:100px">
<img src="my_image.png" style="position:absolute" height="50" width="100" alt="Arrow pointing
浏览 1提问于2013-01-25得票数 0
我使用position : fixed作为div，用于页面顶部的div，但是当我使用offset().top作为子值时，它在滚动时给出了不同的值。我试着说：
CSS：
.parent{
position : fixed;
top : 0px;
}
.child{
height : 20px;
margin-top : 10px;
}
联署材料：
console.log($(".child").offset().top);
当我滚动页面时，上面的JS代码给出了不同的结果。
浏览 0提问于2014-11-10得票数 5
回答已采纳
我有这个
<div class="fascia">
<div class="navigator">
<div class="item">Item 0</div>
<div class="sibling">sibling</div>
<div class="item">Item 1</div>
<div class="
浏览 2提问于2016-02-04得票数 1
回答已采纳
2回答
我有这个简单的代码可以将两个div #container元素并排放置。其中每一个都有一个子div #child，我想相对于它的父(div #container)定位它。
<style>
.container {
float:left;
margin-right: 10px;
}
.child {
position: absolute;
left: 0.2ex;
}
</style>
<div class="container">a<br/>
<div class="chil
浏览 4提问于2012-10-23得票数 0
回答已采纳
5回答
我理解，通过将父div设置为position:relative，如果我使子节点的位置是绝对的，那么子节点的位置在父级中将是绝对的。如果我想使外孙完全位于子级内，我将如何做到这一点，因为子级已经设置为position:absolute了？对不起，如果这个问题很奇怪，任何帮助都很感激。
HTML：
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
</div>
CS
浏览 2提问于2014-01-03得票数 1
回答已采纳
2回答
我正在处理一个使用下面示例中的代码的绘图：
我是HTML、CSS和JS的新手，但我了解一些基本知识。我想知道如何在浏览器的窗口中对图进行居中，特别是在提供的示例代码中放入什么内容。谢谢你的帮助！
浏览 4提问于2013-10-11得票数 2
回答已采纳
1回答
我还没能弄清楚这个问题。这是我第一次尝试z-index，我正在尝试应用一个左手阴影框，但无法将其放到桌子下面。查看jsfiddle链接，该框使用以下css，但不会转到左上角。我试着使用其他东西的z索引，并将它们设置为不同的值。如果我将框放在1而不是-1，它会放到正确的位置，但我不能将菜单子项目和徽标放在它上面。
.leftbox
{
position:absolute;
left:0px;
top:0px;
height: 100%;
width: 220px;
background-color: #36454f;
z-inde
浏览 1提问于2014-05-15得票数 0
2回答
我有一个模式窗口，其中显示了一些数据，也有图片，打开在Blueimp画廊。我遇到的问题是，当图像在BlueImp图片库中打开时，图像在屏幕中间没有垂直对齐。它要么是底部，要么是顶部，这取决于我在模态窗口中滚动的位置。我需要去中间的模式窗口，并打开画廊，在这种情况下，灯箱看起来中心。这个问题不会发生在没有模态的页面中直接使用blueimp时。看起来，blueimp画廊的灯箱以整个模态高度为中心，而不是视口高度。我怎样才能覆盖模式窗口内的blueimp呢？在引导调制解调器中使用blueimp时，是否有css修复或js修复来覆盖此？
这是我的装备的一个例子：
<div uib-modal-wi
浏览 5提问于2017-03-10得票数 3
回答已采纳
5回答
有没有办法绝对定位一个div相对于它的同级？例如:在一个div中，还有另外两个div- div1和div2。相对于div1，我想对div2进行绝对定位。
浏览 2提问于2012-05-17得票数 61
回答已采纳
我开始越来越多地使用RelativeLayout，但也有一些东西我经常碰到。
假设我有一个状态文本视图，我想要顶部和中心。然后我在它下面有一堆其他的对象，比如图像和表格布局。
我希望状态文本视图下面的内容尊重状态文本视图的个人空间，而不是直接在上面绘制。
但我看到的是，在相对布局中，除非我使用android:layout_below和android:layout_above等对齐方式，否则一切都会堆积在一起。
有没有一个属性，我可以添加到状态文本视图，使它，使其他对象不想要绘制在它上面？或者我必须一直在所有东西上使用对齐标签，而不是把东西对齐？
谢谢!
浏览 1提问于2010-08-21得票数 0
回答已采纳
2回答
我现在对绝对定位有点困惑。我一直认为，如果我绝对定位一个元素，它将相对于它的父元素定位(相对于它通常的位置，比如相对位置)。在家庭作业中，我遇到了这样的情况，我很困惑：
<body>
<div> <!-- This is colored red in my example -->
...
</div>
<div style="position: absolute;"> <!-- This is colored green in my example -->
...
</
浏览 3提问于2017-12-04得票数 5
回答已采纳
绝对定位很好，但它似乎是相对于浏览器窗口进行定位的。这对我不起作用，因为我的页面内容居中。我试图构建一个类似于的结构。请注意，页面的左下角有一个灰色条，上面有一个标题为“关于”的部分，然后在“快速链接”和“保持连接”的右侧。那么，如果我让灰色条部分在页面居中-我该如何定位这三个部分呢？(一个在另一个的右边)。再说一次，我所能想到的就是将它们绝对定位在我想要的位置，但是没有一种方法可以在它们各自的div标签中而不是在主窗口中“绝对”地定位它们吗？
浏览 0提问于2011-09-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
