查找div相对于窗口的左侧位置
可以使用JavaScript中的offsetLeft属性来实现。
offsetLeft属性返回一个元素相对于其offsetParent元素的左侧位置（以像素为单位）。
具体步骤如下：
- 首先，获取到要查找位置的div元素，可以使用JavaScript的getElementById()函数或其他选择器方法来获取。
- 然后，使用offsetLeft属性来获取div元素相对于其offsetParent元素的左侧位置。
下面是一个示例代码：
var divElement = document.getElementById('yourDivId');
var leftPosition = divElement.offsetLeft;
console.log('Div相对于窗口的左侧位置：', leftPosition);以上代码中，将"yourDivId"替换为你实际使用的div元素的id。
关于offsetLeft的更多信息和使用示例，你可以参考腾讯云的文档：
以上是使用JavaScript获取div相对于窗口左侧位置的方法。
相关·内容
1回答
我遇到了一个问题，在我使用的投资组合查看器的左导航箭头是移动与窗口的大小，我不知道如何将它包含在我的div和保持静止。我使用的插件叫做"Portfoliojs“
下面是指向我遇到问题的页面的链接：
有什么想法吗？
浏览 1提问于2013-10-13得票数 0
回答已采纳
1回答
我有弹出式。当单击GridView中的按钮时，弹出窗口将显示。我将VerticalOffset和HorizontalOffset设置为弹出窗口。但我有问题，当我滚动GridView弹出弹出不移动。我可以绝对设置弹出窗口？
浏览 1提问于2018-11-26得票数 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
回答已采纳
2回答
有没有办法在jquery中定位一个在css中具有position:absolute的div，并且它的父元素具有position:relative，位于窗口的顶部？我引用的div是carousel的一部分，所以他的位置总是会改变，但不管他的父位置是什么，我都希望这个div始终位于浏览器窗口的顶部。如果有一种方法可以计算出这个div离窗口顶部位置有多远，那么jquery就可以根据它来更改顶部位置，谢谢。div绝对是向右滑动的，而div相对是向右滑动的，但它们都改变了旋转木马和向右滑动的位置，它一直隐藏着，直到被点击时才会显示，我需要它总是从窗口顶部显示。
<div class="
浏览 1提问于2013-02-13得票数 0
回答已采纳
有一个窄的DIV，它包含一个宽得多的DIV。如何在浏览器窗口中水平居中子DIV (而不是父DIV)，使左右边距相等？
<div id="narrow_container" style="float:left;">
<div id="wide_contents">
</div>
</div>
浏览 0提问于2011-05-05得票数 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
回答已采纳
3回答
我在表单元格中有一个链接，当单击该链接时，我会显示一个隐藏的div。
目前我使用的是position: absolute和z-index:10。它工作得很好，但我想把它移到顶部和左边一点。当我添加top：-10px和left：-10px时，div移动到窗口的位置。
如何将表格单元格设置为10px？
浏览 1提问于2011-05-27得票数 4
3回答
我有一个父div，如果页面向下滚动，我希望使子div保持不变。
我尝试使用position:relative;作为父元素，position:fixed;用于子元素，但是它不能工作，因为子div是根据窗口对象而不是父div定位的。
用CSS实现这一目标有什么解决办法吗？如果不是，有一些javascript/Jquery技巧来创建这个吗？
欢迎任何提示或建议！
谢谢!
浏览 1提问于2014-04-04得票数 1
回答已采纳
1回答
我最近发布了一个关于div溢出问题的问题，这个问题已经解决了。
然而，当我的div通过显示更多内容的复选框选择来调整大小时，我的页面现在显示出一些不一致的行为。
在右手边，div的(浮动在右边)调整大小，唯一受影响的其他项目是它们正下方的项目，这很完美。
但是，左侧浮动的div在调整大小时，将其下方的项移动到右侧，所有内容都会偏离对齐方式，并出现巨大的间隙。
以下是代码
<div id="wrapper">
<div id="main_content">
<h1 class="standard
浏览 3提问于2014-02-04得票数 0
我在用：
$(document).ready(function(e) {
$('.map').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$(".formX").val((e.pageX - posX))
$(".formY").val((e.pageY - posY))
});
});
然而，要在地图中找到位置，返回的结果是用于包围项目的div的位置，而不是指定的类。
当我移除div
浏览 0提问于2013-12-20得票数 0
回答已采纳
1回答
所以我有一堆div，它们对于覆盖来说是绝对的。用户通过在覆盖图上拖动来创建正方形div。如果您要创建一个div，然后放大和缩小，div将保持在相同的位置，因为它对覆盖图是绝对的，如前所述。
然而，这就是问题所在。您可以将div位置(顶部、左侧、高度、宽度)保存到.json，并加载.json以显示之前保存的所有div。这个很好用..。如果您在同一浏览器上保存和加载缩放百分比。
例如，如果你以150%的缩放比例绘制div，并试图在100%缩放的情况下加载div的位置，那么该位置就会改变(我假设是为了弥补缩放)。
我试着在保存时强制窗口缩放到100%，但这不起作用，我现在有点卡住了。有人有什么建议吗
浏览 1提问于2015-10-20得票数 0
嗨，我正在开发一个使用swing的桌面应用程序，当我执行框架窗口时，它显示在屏幕的左侧底部，我能定制它并显示在屏幕的中心吗？
浏览 3提问于2014-02-18得票数 1
回答已采纳
我如何让一个最初隐藏的javascript弹出窗口div id=“注册表单”直接显示在它点击的每个链接下面？
链路1
链路2
链路3
Div id=注册表单(显示:无)
对不起，我在手机上很难写代码
浏览 0提问于2011-11-24得票数 1
回答已采纳
2回答
我有一个HTML代码，如下所示；
<div>Content table with varying height</div>
<div id="buttons">
<TABLE>
<TBODY>
<TR>
<TD>2 buttons here....</TD>
</TR>
</TBODY>
</TABLE>
</div>
并且有一个CSS定义为；
div#button
浏览 0提问于2011-08-01得票数 1
回答已采纳
我有几个元素卡在容器中，这些容器被设置为相对定位的父级。在这些元素需要添加自定义工具提示的情况下，工具提示是相对元素之外的固定位置元素。因此，当固定元素试图与窗口一起工作时，根据相关元素的父元素设置偏移量作为其偏移量，这会使固定元素很难在我们想要的元素下对齐。
我会试图展示我尝试过的代码的混乱，但它只是在这一点上是垃圾，因为我在明显正确的方向之外走了太多的方向，以至于我错过了它需要重写。所以在我这样做之前，我需要弄清楚如何获得元素的位置，我需要将固定的元素排列在一起。
我希望这是有意义的。简而言之，我需要基于窗口的位置，而不是家长的想法？
代码的快速示例不完全是代码，但为了示例而显示它
<
浏览 2提问于2013-05-01得票数 0
我正在创建一个网站热图。我知道如何获得点击的xy坐标，但在居中div的页面上，点击的xy坐标会根据用户浏览器窗口的宽度而有所不同。
如何记录一致的xy，以便以后可以显示单击的位置，而不考虑窗口大小？
我可以使用jQuery的offset()根据一些居中的父元素来获得xy。但我会把这个热图放在多个网站上。因此，鉴于每个站点的标记都是唯一的，我如何确定应该使用哪个顶级“包装器”元素来计算偏移量？
有没有什么我忽略的更简单的方法？
浏览 24提问于2012-02-22得票数 0
4回答
与我正在寻找的东西非常相似，但我的情况足够不同，我认为值得提出一个新的问题。
我有几个div绝对位于父div (position: relative)的内部。我想要获取子div相对于窗口的位置。jquery方法似乎不起作用，因为它给了我距父offset()的偏移量。如果div的绝对位置在相对位置div中，有没有办法获得它的绝对位置？
示例html：
<div id="parent" style="position:relative;">
<div id="child1" style="position:absolut
浏览 2提问于2010-08-26得票数 5
回答已采纳
我找到了这个粘性的div代码片段，并对其进行了修改，使其在div命中页面顶部时显示为粘在窗口底部。我只是好奇，有没有一种方法来排序偏移底部。以下是代码：
let Sticky = (function() {
'use strict';
let CSS_CLASS_ACTIVE = 'is-fixed';
let Sticky = {
element: null,
position: 0,
addEvents: function() {
window.addEve
浏览 2提问于2017-08-04得票数 2
我有一个名为iv的imageView，它在onCreate中定义。在onTouchEvent中(不是在onCreate中，所以这不是问题所在)，我调用
int right = iv.getRight();
然而，这使得"right“等于118，即图像的长度。我希望它返回屏幕上的位置，但它却返回视图本身的维度。有人能解释一下为什么吗？
如果有任何其他相关的代码，您可能需要注释。
浏览 3提问于2015-03-08得票数 1
回答已采纳
如何找到特定html元素的X，Y坐标(例如，div、表、标签等)相对于桌面屏幕(即浏览器窗口之外)使用JavaScript？
我可以使用offsetHeight和offsetWidth找到元素的高度和宽度，但是找不到任何可以给出元素相对于用户整个桌面屏幕的确切X，Y坐标的东西。
浏览 1提问于2011-05-24得票数 3
回答已采纳
更新
我刚刚更新了jsFiddle，这样您就可以看到“弹出”的发生，以及它是如何永远不会中心化的。每次都是200便士。
因此，如果用户向下滚动了一个很长的页面并单击以使弹出发生，弹出将返回到页面的顶部-200 on，而不是以可见屏幕为中心。
我将试用下面的答案，并更新其结果
我的布局中包含了一个隐藏的div，作为
这是部分
javascript函数显示这个div，用于显示ajax请求的结果。
function showResultPopUpDiv(divId, title) {
var popUpId = document.getElementById(divId);
v
浏览 2提问于2012-05-19得票数 0
回答已采纳
1回答
船坞和锚有什么区别？
、、、
我有一个窗口表单，其中有很多控件( ListBox、Groupbox、Combobox、TextBox、ListBox等)。每当窗体的大小被更改时，我需要调整控件的大小并自动排列。为了实现这一点，我需要知道Dock和Anchor之间的区别。对接和锚定之间的实际区别是什么？
浏览 3提问于2014-10-27得票数 28
回答已采纳
我有两个div，一个在另一个之上。第二个on绝对位于它的下方(相对div中的绝对div)。
我想将第二个div移到另一个div的顶部，这样它就会出现在中间。
这样做的过程是将DIV2的style.top设置为与DIV1相同，这在理论上应该将其置于它之上。然而，到目前为止，尝试都失败了。
绝对定位是正确的，因为输入值可以正确地移动它，但我认为我使用了错误的方式来获取DIV1的高度/顶值。
想法？
我试过这个：
divLoading.style.top = divContent.style.top；
但它会停留在原来的位置。
编辑:问题不在于绝对/相对如何工作，而在于使用哪个javascript值
浏览 0提问于2009-10-08得票数 0
回答已采纳
3回答
嗨，我有css的问题，因为当我调整窗口大小时，div没有正确放置如下
这是涉及div的css
.similar_story_block_form {
background-color: white;
border: 1px solid #CCCCCC;
border-radius: 0 0 12px 12px;
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
font-size: 13px;
left: 337px;
position: absolute;
top: 105px;
浏览 3提问于2012-10-18得票数 0
回答已采纳
2回答
有人能告诉我如何在鼠标点击上显示位置吗？我不是要点击显示的位置.如果我有这样的要求，我会要求：
<div id="div123" style="width: 300px; height: 300px;"></div>
和jquery：
$("#div123").click(function(){
var x = $("WHERE MOUSE CLICKED INSIDE #div123").position();
});
浏览 3提问于2016-04-30得票数 0
回答已采纳
我有一个带有背景图像的div，它在移动设备上显示不同的图像，但我正在努力设置图像响应尺寸。目前，我不得不手动设置宽度和高度，这是我试图避免的。如果我使用100%作为宽度，100%或自动作为高度，图像根本不会显示。
加价：
<div id="mts-popup" class="white-popup mfp-hide wow slideInDown animated" data-wow-duration=".5s">
<h2>MTS Collective</h2>
<div class="left-
浏览 0提问于2015-11-19得票数 0
1回答
我有一个非常简单的网页，我正在尝试构建。它有一个img标记，其中包含一个SVG图像文件，该文件可以缩放到页面宽度的100%。我还有一个DIVs集合，我希望相对于图像“修复”这些DIVs。
我从使用ems的绝对定位开始，但很快意识到，如果我想让div相对于缩放背景保持在适当的位置，我必须移动到%。
但是后来我意识到问题是因为我的SVG由于页面宽度的变化而缩放，我不能设置一个好的高度百分比，因为当窗口的宽度由于SVG的纵横比而改变时，高度可能会也可能不会受到影响。
有任何关于方法的建议吗？我觉得我遗漏了一些基本的东西。
下面是我的页面的一个例子：
<html>
<head>
浏览 10提问于2010-11-22得票数 1
1回答
我在菜单(三个点)图标上使用navBar中的bootstrap dropdown ? 但问题出在移动设备上，当我打开navBar并单击菜单按钮时，下拉菜单就会出现，但它会占用空间，而不是显示在内容的顶部。如图所示 ? 这是html代码 <div class="dropdown" style="display: inline-block">
<img src="{{environment.assets_base_url}}assets/images/menu.png" id
浏览 34提问于2019-04-01得票数 2
回答已采纳
1回答
我在div中有两个图像放在彼此的顶部，下面有一个标题。我希望随着浏览器窗口的缩小，所有这些元素都能按比例一起缩放。
目前，这两个图像的位置发生了变化，在移动设备上看起来并不相同。
.highlightimg {
max-width: 700px;
height: auto;
width: 100%;
display: block;
position: relative;
z-index: 1;
padding-top: 10vh;
margin-right: 0;
}
.showcase {
max-width: 750px;
margin:auto;
position: relative
浏览 4提问于2018-08-26得票数 0
回答已采纳
3回答
我有一个这样的标记
<div>
<div>hello</div>
<div>World</div>
</div>
我使用第一个div作为float right，第二个div作为float left。
问题是获取"World“div的结束角的位置
我像这样使用JS
var left = $('.inner-page-right-content').offset().left;
left = -(900- left);
$('#inner-page-container')
浏览 1提问于2013-09-06得票数 2
请参阅我的网站
我一直在尝试将保险库旁边的电灯开关设置为可点击的功能。
然而，我不能让我的div停留在这个位置(调整窗口大小会导致它四处移动)。
实现这一目标的最佳方法是什么？
浏览 0提问于2012-04-25得票数 4
回答已采纳
1回答
当div滚动到某个点时，我正在尝试运行一些脚本。有一个固定的导航，当用户滚动窗口时，假设当它到达靠近导航的位置时，更改导航名称。我使用的是$(window).scroll函数，但它只检查一次div位置，并且不更新值。如何让滚动检查窗口大小每5-10像素的移动，以便它不会占用太多的内存/处理。代码设置在：
HTML
<div id="nav"> NAVIGATION
<div class="message">div name</div>
</div>
<div id="main">
&
浏览 0提问于2012-09-20得票数 5
回答已采纳
1回答
我遇到一个问题，把图表隐藏在一个模态中。用户可以通过模式单击，单击事件隐藏了其他元素。然而，有些图表是从文档的流程中隐藏出来的，用的是位置:绝对。我读到了关于位置的文章:绝对的MDN和元素应该放在他们最接近的父元素上，而它们不是。我是不是遗漏了什么？
绝对从普通文档流中删除元素；在页面布局中没有为元素创建空间。相反，它是相对于其最近的定位祖先(如果有的话)定位的；否则，它是相对于初始包含块放置的。它的最终位置由上、右、底和左的值决定。当z-索引的值不是自动的时，此值将创建一个新的堆叠上下文。绝对定位的框可以有边距，并且它们不会与任何其他边距一起崩溃。
截图
码
$(".ta
浏览 4提问于2017-09-15得票数 0
回答已采纳
没有为div赋值left，我使用$('#').css('left');来获取left值，但它显示为auto。
如何获取div的左值？
谢谢，吉恩
浏览 0提问于2010-11-20得票数 18
回答已采纳
2回答
我对CSS中的绝对位置和相对位置感到困惑。
<div id="container" style="position:"relative">
<button style="position:"absolute"; left:10px;" >
</div>
在上面的例子中，当我将位置设置为绝对位置，并将左侧设置为10px to button时，意味着它不会从浏览器窗口获取位置。相反，它从父div (容器)获取位置，因为容器位置是相对的。为什么？
当我将绝对位置设置为任何元素时，它
浏览 1提问于2013-06-20得票数 1
我在很多地方读到了position: fixed；应该在视区中建立元素的基础，而不是它的父元素，因为它已经从正常的文档流中删除了。但是，从下面的代码中可以看出，它似乎是这样工作的。固定位置的元素取其在父元素中的起点。怎么回事！？谢谢。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="cssreset.css">
<head>
<title>TTK</title>
<style>
* {
box-sizing: border
浏览 0提问于2017-02-08得票数 3
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
2回答
我有两个div。其中一个应位于距窗口左边框5%的位置，另一个应位于前面提到的div的右侧，并相对于窗口宽度居中。如果窗口太窄，它不应该与第一个div重叠，也不应该移动到下面。
无论后面是什么，都应该放在前两个div中最高的一个下面。
我该怎么做呢？
最接近的方法是对第一个div使用浮点数。
编辑:这是我满意的最终结果：
感谢@Christopher Smithson和@gmebeh，他们的回答帮助我找到了这个解决方案。
浏览 0提问于2012-05-25得票数 0
回答已采纳
5回答
我有一个这样的代码：
$('#lol').css({ position: "absolute",
marginLeft: 0, marginTop: 0,
top: 0, left: 0});
问题是我的div是相对定位的，所以它是div的0点，而不是整个窗口。为什么会这样呢？
浏览 3提问于2011-06-28得票数 6
回答已采纳
我试图使用element.getBoundingClientRect()对元素进行偏移，但是问题是，如果网页的高度很长，并且涉及滚动，则函数返回窗口的元素w.r.t的偏移量。如何获得偏移量w.r.t页的顶部？
浏览 2提问于2016-09-12得票数 1
回答已采纳
嗨，我需要得到所有元素的位置，这些元素具有每个parent - .components的“数据分支”属性
<div class="component">
<ul class="component--list">
<li data-branch="1"><p>item<p></li>
<li><p>item<p></li>
<li>
<p>item<p>
浏览 0提问于2016-10-25得票数 2
2回答
下拉位置问题
、、、
所以，我有这段代码来显示div顶部的下拉列表，而不是它内部的下拉列表。问题是，当我滚动页面时，下拉块仍然固定在它打开的位置。
有没有办法让区块保持在div上方，但让它在滚动页面时移动？
感谢您的帮助！
(function() {
var dropdownMenu;
$(window).on('show.bs.dropdown', function(e) {
var topValue = e.relatedTarget.getBoundingClientRect().y
var leftValue = e.relatedTarget.getBoun
浏览 2提问于2018-05-15得票数 0
2回答
如何相对于容器固定位置？
、、、、
我正在尝试修复，div所以它总是坚持到屏幕的顶部，使用：
position: fixed;
top: 0px;
right: 0px;
但是，div在一个居中的容器内。当我使用position:fixed它修复div相对于浏览器窗口，如它在浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来修复一个相对于元素的元素div，但是当你向下滚动页面的时候元素会消失，并且不会像上面一样粘到顶部position:fixed。
是否有黑客或解决方法来实现这一目标？
浏览 783提问于2017-12-19
我有这样的HTML：
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<div class="row5"></div>
<div class="row6"></div>
<div class="
浏览 0提问于2015-04-08得票数 0
一旦你为Viola Jones人脸检测器训练了一个强大的分类器，你就应该在你的测试图像上运行一个24x24的子窗口。一旦你把它移到屏幕上，你就应该缩放它(论文每次都推荐x1.5 )。
我的问题是，这样做的要点是，在不同的尺度上很容易计算出特征。然而，你应该如何扩展这个特性呢？你只是把宽度/高度乘以比例因子？或者你也要移动它吗？(向右下角缩放)。或者必须将其相乘，以使其宽度/高度比与原始子窗口的高度/宽度保持不变？
这是我想说的：
原始子窗口是4x3，我将它乘以2，所以它是8x6。2x1功能应该有多大？它的左上角应该在哪里？同样的地方？
谢谢
浏览 0提问于2012-12-10得票数 2
回答已采纳
我在获取一个元素的中心坐标时遇到了一些问题，这个元素的中心也是其他具有绝对位置的元素的子元素。
为了更好地理解这个问题，你可以访问"/Resources“文件夹中的my index.html。
因此，我在其他一些可拖动窗口中有一些可拖动窗口(使用interact.js)，并且我希望通过线- div连接它们的中心(它们是使用div绘制的，并进行了一些变换)。
我使用来呈现线条(可能这里有一些问题)。我试过用jsPlumb来画线条，但是失败了:(
这里有x和y两个点。
// bottom right
var x1 = offset1.left - margin1.left
浏览 1提问于2016-06-23得票数 4
我有一个以div为中心的水平。这在宽屏幕上是很棒的，但是如果您将浏览器窗口拉得更窄，它将在另一个div下移动，它位于左侧上，但右侧仍有空空间。当它击中另一个div时，我希望它不再以中心为中心。如margin auto，但与min margin of 300px上的左。
据我所知，没有这样的事情。但是，是否有办法实现这一结果？
谢谢。
浏览 2提问于2015-04-24得票数 0
好的，有三种方法来获得浏览器窗口的高度(不是完整的网页高度，这就是区别)。
jQuery
我不明白清单上第3条背后的逻辑。
height: 100%和absolute定位。height: 100%填充父级。定位absolute也是相对于父的，所以它不应该占据整个页面的高度。视口是如何发挥作用的？
我知道fixed相对于视图，但我认为这是与absolute不同的地方。height: 100% div确实有一个父类，它是body，它应该是相对的。
谁能解释一下吗？
浏览 1提问于2014-10-21得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
