jquery - 将 div 的位置附加到相对于页面的居中 div

Question

试图将一个红色 div 放置在一个居中的 div 附近，如下图所示：
你能给我推荐一个 css3 或 jquery 简单的方法吗？

橙色 div 通过样式居中：{margin-left 和 margin-right auto} 我只希望红色 div 始终靠近红色 div。
并且红色div TOP位置应该固定在它所在的位置。不相对于橙色div。（相对于 webexplorer）

Answer 1

在这种情况下不需要 CSS3，如果您知道红色 div 的尺寸，则可以执行以下操作（如此JSBin所示）：

.orange {

  background-color: orange;
  margin: 0 auto;
  width:  200px;
  height: 200px;
  position: relative;

}

.red {

  background-color: red;
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 50px;

}

如果您不知道元素的维度，那么情况会变得有点棘手，因为子元素不会溢出其父元素，因此维度将始终是红色 div 维度的最大值。在这种情况下，您将不得不稍微修改 CSS 并添加一些 jQuery 魔法，就像在另一个JSBin中演示的那样。

CSS

orange {

  background-color: orange;
  margin: 0 auto;
  width:  200px;
  height: 200px;
  position: static;

}

.red {

  background-color: red;
  position: relative;

Javascript

jQuery(document).ready(function($){

  var redWidth = $('.red').width();
  $('.red').css('left', -redWidth);

});

更新

既然你更新了你的问题，答案也需要更新：在我的脑海中，我可以想到这个解决方案（你可以看到它在这里工作）：

$(window).scroll(function(){

    $('.red').css('top', window.pageYOffset);

});

但也许有更好的纯 CSS 解决方案。

更新#2

好的，找到一个更优雅的纯 CSS 解决方案，但前提是您知道居中容器的宽度。听到这个（并在行动中看到它）：

.red {

  background-color: red;
  margin-left: -150px; // See note (1)
  position: fixed;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;

}

(1)这个margin是通过将width橙色元素的一半加上红色的自己的来计算的width。如果您不知道红色的宽度，请使用上面Javascript部分中解释的技巧。

Answer 2

只要您知道红色块的尺寸，您就可以将它放在橙色块内，并将其绝对定位到其左侧的宽度像素：

看演示

CSS：

.container {
    position: relative;
    background-color: #FFCE6B;
    width: 700px;
    height: 300px;
}

.orangeblock {
    position: relative;
    margin: 0 auto;
    background-color: orange;
    width: 300px;
    height: 200px;
}

.redblock {
    position: absolute;
    left: -100px;
    background-color: red;
    width: 100px;
    height: 100px;
}

标记：

<div class="container">
    <div class="orangeblock">
        <div class="redblock"></div>
    </div>
</div>

如果您不知道红色块的尺寸，那么您仍然可以将它放在橙色块内并通过 jQuery 进行定位：

$(document).ready(function() {
    $(".redblock").css({position: "absolute", left: -$(".redblock").outerWidth()})
});