{"id":24849,"date":"2024-03-16T03:57:59","date_gmt":"2024-03-16T03:57:59","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/"},"modified":"2024-03-22T04:44:39","modified_gmt":"2024-03-22T04:44:39","slug":"a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/","title":{"rendered":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript"},"content":{"rendered":"<p>Vertical distance of the element&#8217;s top edge from the top edge of the nearest relatively positioned parent element.<\/p>\n<p>The offsetTop property returns the distance between the top edge of an element and its closest positioned ancestor element, which is the offsetParent.<\/p>\n<p>The value of the offsetTop property is an integer, measured in pixels. If the element is hidden (display property set to none) or if the visibility property of the element&#8217;s parent element is set to hidden, the offsetTop property will return 0.<\/p>\n<p>Horizontal position from the left side<\/p>\n<p>The offsetLeft property returns the distance from the left edge of an element to its offsetParent element. The offsetParent refers to the closest ancestor element that is already positioned (position property value is not static).<\/p>\n<p>The value of the offsetLeft property is an integer, in pixels. If the element is hidden (display property set to none) or the parent element&#8217;s visibility property in the style attribute is set to hidden, the offsetLeft property will return 0.<\/p>\n<p>parent element:<\/p>\n<p>The offsetParent property returns the closest ancestor element of an element that is already positioned (position property value is not static).<\/p>\n<p>If an element&#8217;s offsetParent is the body element, it means that the element is the root element on the page.<\/p>\n<p>The offsetParent property returns an element, or null if an element does not have an offsetParent.<\/p>\n<p>In conclusion,<\/p>\n<p>The offsetTop and offsetLeft attributes are used to retrieve the distance between the top and left edges of an element relative to its offsetParent element.<\/p>\n<p>The offsetParent property is used to retrieve the closest positioned ancestor element of an element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vertical distance of the element&#8217;s top edge from the top edge of the nearest relatively positioned parent element. The offsetTop property returns the distance between the top edge of an element and its closest positioned ancestor element, which is the offsetParent. The value of the offsetTop property is an integer, measured in pixels. If the [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24849","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript\" \/>\n<meta property=\"og:description\" content=\"Vertical distance of the element&#8217;s top edge from the top edge of the nearest relatively positioned parent element. The offsetTop property returns the distance between the top edge of an element and its closest positioned ancestor element, which is the offsetParent. The value of the offsetTop property is an integer, measured in pixels. If the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T03:57:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:44:39+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Taylor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript\",\"datePublished\":\"2024-03-16T03:57:59+00:00\",\"dateModified\":\"2024-03-22T04:44:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\"},\"wordCount\":279,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\",\"name\":\"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:57:59+00:00\",\"dateModified\":\"2024-03-22T04:44:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/","og_locale":"en_US","og_type":"article","og_title":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript","og_description":"Vertical distance of the element&#8217;s top edge from the top edge of the nearest relatively positioned parent element. The offsetTop property returns the distance between the top edge of an element and its closest positioned ancestor element, which is the offsetParent. The value of the offsetTop property is an integer, measured in pixels. If the [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:57:59+00:00","article_modified_time":"2024-03-22T04:44:39+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript","datePublished":"2024-03-16T03:57:59+00:00","dateModified":"2024-03-22T04:44:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/"},"wordCount":279,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/","url":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/","name":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:57:59+00:00","dateModified":"2024-03-22T04:44:39+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/a-detailed-explanation-of-offsettop-offsetleft-and-offsetparent-in-native-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24849"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24849\/revisions"}],"predecessor-version":[{"id":58909,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24849\/revisions\/58909"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}