Question

我知道用css是不可能的，但是我试图找到一些jQuery解决方案，到目前为止，堆栈上的答案还没有运气。

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

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

所以问题是如何将div与“dont-want-parents”类放在包装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

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>

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

1 个答案: