6 examples of 'css position relative to parent' in JavaScript

183
export function position(element, parent) {
184
    const elementOffset = offset(element);
185
    const parentOffset = offset(parent || toNode(element).offsetParent || toWindow(element).document.documentElement);
186
187
    return {top: elementOffset.top - parentOffset.top, left: elementOffset.left - parentOffset.left};
188
}

25
function calcPositionCss(target)
26
{
27
  var op = $(target).offsetParent().offset();
28
  var ot = $(target).offset();
29
30
  return {
31
    top: ot.top - op.top,
32
    left: ot.left - op.left,
33
    width: $(target).width()
34
  };
35
}

259
function position_fixed(...elements)
260
{
261
  var all_bounds = [];
262
  // Store all current bounds before manipulating the layout.
263
  for (var id in elements) {
264
    var el = elements[id];
265
    var bounds = el.getBoundingClientRect();
266
    bounds = { top: bounds.top, left: bounds.left, width: bounds.width };
267
    // Workaround for Chromium (Beaker): sticky elements have wrong position.
268
    // With the tabs element, bounds.top is 0, not 40, except when debugging...
269
    if (window.getComputedStyle(el).getPropertyValue("position") === "sticky") {
270
      el.style.position = "fixed";
271
      bounds.top = el.getBoundingClientRect().top;
272
      el.style.position = "";      
273
    }
274
    all_bounds[id] = bounds;
275
  }
276
  // Update the layout.
277
  for (var id in elements) {
278
    var el = elements[id];
279
    var bounds = all_bounds[id];
280
    el.style.position = "fixed";
281
    el.style.top = bounds.top + "px";
282
    el.style.left = bounds.left + "px";
283
    el.style.width = bounds.width + "px";
284
  }
285
}

1280
Carousel.prototype._getCssPosition = function _getCssPosition(pos) {
1281
  return 'translate' + this._translateAxis + '(' + pos + ')';
1282
};

114
findAbsolute(reference: Element, target: Element, placement: string): AbsolutePosition {
115
	const referenceOffset = this.getAbsoluteOffset(reference as HTMLElement);
116
	const referenceRect = reference.getBoundingClientRect();
117
	return this.calculatePosition(referenceOffset, referenceRect, target, placement);
118
}

783
function position(node, offsetParent) {
784
  var parentOffset = {
785
    top: 0,
786
    left: 0
787
  },
788
      offset; // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
789
  // because it is its only offset parent
790
791
  if ((0, _style.default)(node, 'position') === 'fixed') {
792
    offset = node.getBoundingClientRect();
793
  } else {
794
    offsetParent = offsetParent || (0, _offsetParent.default)(node);
795
    offset = (0, _offset.default)(node);
796
    if (nodeName(offsetParent) !== 'html') parentOffset = (0, _offset.default)(offsetParent);
797
    parentOffset.top += parseInt((0, _style.default)(offsetParent, 'borderTopWidth'), 10) - (0, _scrollTop.default)(offsetParent) || 0;
798
    parentOffset.left += parseInt((0, _style.default)(offsetParent, 'borderLeftWidth'), 10) - (0, _scrollLeft.default)(offsetParent) || 0;
799
  } // Subtract parent offsets and node margins
800
801
802
  return (0, _extends2.default)({}, offset, {
803
    top: offset.top - parentOffset.top - (parseInt((0, _style.default)(node, 'marginTop'), 10) || 0),
804
    left: offset.left - parentOffset.left - (parseInt((0, _style.default)(node, 'marginLeft'), 10) || 0)
805
  });
806
}