Question

所以我有一个奇怪的边缘情况，遗留文档中有一些元素绝对位于相对定位的div内。这些元素对left css属性具有负值。

.container {
     position: relative;
     width: 100%;
     height: 100%;
}

.element {
     width: 100px;
     height: 100px;
     background: red;
}

现在有两个问题：

是否可以设置container滚动并显示负面定位的元素？
如果没有，我该如何修复负面元素，以便所有剩余元素相应地移动？

以下是一个示例JSBin： http://jsbin.com/xolifotiku/edit?html,css,output

Answer 1

你的意思是什么？

＆＃13;

$(document).ready(function() {
  $('html, body').animate({
    scrollTop: $('.element').offset().top
  }, 2000);
});

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  height: 500px;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 50px 20px 20px 20px;
}
.element {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -20px;
  left: 0px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
</div>

＆＃13;

Answer 2

这更接近于我正在处理的情景......

$(document).ready(function() {
  $('html, body').animate({
    scrollLeft: $('.element').offset().left
  }, 2000);
});

body {
  margin: 0px;
  padding: 0px;
  height: 500px;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 50px 20px 20px 20px;
}
.element {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -20px;
  left: -100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
</div>

$(document).ready(function() {
  $('html, body').animate({
    scrollTop: $('.element').offset().top
  }, 2000);
});

body {
  margin: 0px;
  padding: 0px;
  height: 500px;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 50px 20px 20px 20px;
}
.element {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -20px;
  left: 0px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="element"></div>
</div>

滚动到相对定位的div内的绝对定位元素

2 个答案: