24496

offsetParent() in jQuery not returning expected relative-positioned ancestor

Question:

I have some HTML with the following approximate structure and positioning:

<div class="grand-parent" style="position: absolute"> <div class="parent" style="position: relative"> <div class="child"></div> </div> </div>

In my jQuery widget, I'm trying to insert an element that is located inside the "offset parent" of the element targeted by the widget. To do so, I essentially have code like this:

var targetElement = $('.child'); $('<div/>').appendTo(targetElement.offsetParent());

Unfortunately, the element appears to be inserted as a child of .grand-parent instead of parent. My understanding of offsetParent() (and the documentation seems to back this) is that offsetParent() should return .parent because it is positioned relative. Is my understanding of offsetParent incorrect, or is there a problem with jQuery (I'm using 1.4.1).

Answer1:

According to <a href="https://developer.mozilla.org/en/DOM/element.offsetParent" rel="nofollow">https://developer.mozilla.org/en/DOM/element.offsetParent</a>, offsetParent doesn't work as I had expected if the parent is not displayed (display: none). In my case, the container element is just that.

Recommend

  • Dialogflow fulfilment webhook url support self signed certificates?
  • File encoded as UCS-2 Little Endian reports 2x too many lines to Java
  • What is the solution for “The Type or namespace 'AjaxControlToolkit' could not be found…”?
  • iPhone/iPad: animated splash screen?
  • Java XML DTD validation
  • kube-apiserver high CPU and requests
  • OWL Api, move class from parent A to B
  • ProgressDialog.show inside AsyncTask stop my Program from execution
  • Mailkit Authenticate to Imap fails
  • Simple Donut Chart with Raphael
  • Plotting multiple variables from same data frame in ggplot [duplicate]
  • Train two models concurrently
  • Linking with 32bit libraries under linux 64bit
  • Firebase suddenly reports invalid signature
  • Hyperlink to Outlook Attachment
  • Thick underline when hover AND when active
  • Could not resolve all files for configuration ':react-native-vector-icons:classpath'
  • SpringBoot don't replacen System variable {user.home} in Spring Tool Suite Version: 3.8.4.RELEA
  • Smarter Removing Unnecessary WhiteSpace CSV
  • Implementation of timeout in LDAP
  • Javascript inside HTML import not affecting imported HTML
  • Facebook Error (#200) The user hasn't authorized the application to perform this action (PHP)
  • What are advantages/disadvantages of using Selenium for Java vs .NET applications?
  • Wireshark Display Filter for Unique Source/Destination IP and Protocol
  • Silverlight Event Log in Isolated Storage
  • Floating parent div grows to hypothetical width of floating child div
  • C++ STL stack pop operation giving segmentation fault
  • r - input value by user to dataframe via shiny
  • Terminal run dalvikvm with am.jar
  • how to snap two objects in runtime in unity?
  • How to handle div that is created dynamically in a table
  • Did not understand process of initialize in swift programming
  • Bind selectedDates Aggregation for Calendar
  • Make checkout phone field optional for specific countries in WooCommerce
  • Cross compile glibc for arm, got undefined reference to some unwind functions
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined