相对于具有绝对位置的下一个元素的元素

Question

我需要使用绝对位置移动一个元素，我想让它与前一个元素相对..

我的代码格式：

<div>
    <div class="one" style="position:relative"></div>
    <span class="two" style="position:absolute"></span>
</div>

跨度需要移动哪个相对于具有第一类的div。

Answer 1

绝对值始终相对于第一个父级witg定位。因此，您只能使用js执行请求，而不能仅使用CSS。

Answer 2

将.two放在.one内并调整其位置。移动.one也将移动.two

＆＃13;

＆＃13;

$(document).ready(function() {
  setInterval(function() {
    $('.one').animate({
      left: '100px'
    }, 500);
  }, 1000);
  setInterval(function() {
    $('.one').animate({
      left: '300px'
    }, 500);
  }, 1600);
  setInterval(function() {
    $('.one').animate({
      left: '200px'
    }, 500);
  }, 2200);
  setInterval(function() {
    $('.one').animate({
      left: '0px'
    }, 500);
  }, 2800);
});

＆＃13;

.one {
  width: 100px;
  height: 20px;
  position: relative;
  background-color: blue;
}
.two {
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 20px;
  background-color: red;
  display: inline-block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="one" style="position:relative">
    <span class="two" style="position:absolute"></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<div>
    <div class="one" style="position:relative">
        <span class="two" style="position:absolute"></span>
    </div>
</div>