0

http://jsfiddle.net/DAFHq/1/

<div id="gray-box">
<div id="red-box"></div>
</div>

中央に垂直方向に配置したまま、スクロールするコンテンツを含むグレーのボックスの右に 20 ピクセルの場所に RED の正方形を配置する必要があります。

スクロール中および画面のサイズ変更中は、灰色のボックスに対して相対的に配置されたままにする必要があります。

何か案は？jsFiddle は、必要なものを示すために見つけて変更したものです。垂直方向の配置は完璧ですが、水平方向に必要な方法で配置する方法がわかりません。

多分jQueryで何か？

4

2 に答える 2

1

スクロール要素にはホルダー要素が必要です。

<div id="grey-box">
    <div id="red-box"></div>
    <div id="elements-holder"></div>
</div>

.elements-holder {
    overflow: auto;
}

#grey-box {
    position: relative;
}

#red-box {
    position: absolute;
    right: 20px;
    height: 40px;
    width: 40px;
    top: 50%;
    margin-top: -20px; 
}
于 2013-01-16T09:53:53.757 に答える
1

これを試して：

var positionFoo = function() {
  $('#foo').css({
    'left': $('#bar').offset().left + $('#bar').width() + 20 + 'px',
    'top': ($(window).height() / 2) - ($('#foo').height() / 2)
  });
};

$(window).resize(positionFoo);
positionFoo();

position: fixed;にも追加する必要があります#Foo。

更新されたフィドル

于 2013-01-16T10:05:42.533 に答える