忽略所有包裹绝对定位div的相对定位父级div？

Question

忽略所有包裹绝对定位div的相对定位父级div？

3

我知道使用CSS不可能实现，但是我试图寻找一些jQuery的解决方案，目前在stack上还没有找到答案。

无论如何，HTML的顺序看起来像这样，并且需要保持这样的顺序：

<div class="wrapper">
  <div style="position:relative;">
    <div style="position:relative;">
      <div class="dont-want-parents" style="position:absolute;">
      </div>
    </div>
  </div>
</div>

所以问题是如何将类名为“dont-want-parents”的div定位到包装div的右下角，忽略所有相对定位的父元素。

感谢所有试图帮助我的人，最终我找到了一个解决方案：

$(window).on("load resize",function(e){
  var parentoffset = $('.dont-want-parents').parent();
  var elwidth = $('.dont-want-parents').width();
  var offset = parentoffset.offset();
  $('.dont-want-parents').css('right', -offset.left + elwidth);
});

这是一个可用的fiddle

- Darko

你的标记结构应该是不同的。 - undefined

@RayonDabre 嗯，我完全同意，但这不是我来改变的 :) 或者更好地说，我想改变它，但不幸的是我必须按照现状来工作。 - undefined

1

你需要取消父元素相对位置元素所做的偏移；如果一个元素向右偏移150像素，那么你的元素需要向左偏移-150像素... - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph · Answer 1

你可以将它们全部设置为static，这样具有absolute的元素就会忽略它们。此外，top和left是必需的，因为position:absolute只会将元素从布局中移除，而不会改变其原始位置。

$('.wrapper > div, .wrapper > div > div').css('position', 'static');

div{
  padding: 50px;
  background: rgba(255, 0, 0, 0.5);
}

.wrapper{
  position: relative;
  background: green;
}

.dont-want-parents{
  background: blue;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div style="position:relative;">
    <div style="position:relative;">
      <div class="dont-want-parents" style="position:absolute;">
      </div>
    </div>
  </div>
</div>

另一种方法是直接从任何位置取出元素，并将其放置在一个安全的绝对位置。

$('.dont-want-parents').appendTo('.wrapper');

div{
  padding: 50px;
  background: rgba(255, 0, 0, 0.5);
}

.wrapper{
  position: relative;
  background: green;
}

.dont-want-parents{
  background: blue;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div style="position:relative;">
    <div style="position:relative;">
      <div class="dont-want-parents" style="position:absolute;">
      </div>
    </div>
  </div>
</div>