- cssとjqueryを使用して絶対要素と静的要素を揃えようとしています
- css を使用して静的要素をレンダリングする
- cssを使用して絶対要素をレンダリングする
- jqueryを使用して絶対要素の「トップ」値をリセットします。CSSの静的要素に設定されたのと同じマージン/パディングなどを使用します
- しかし、私の絶対要素と静的要素は水平方向に整列しません。
- また、ブラウザのサイズを変更すると、レイアウトがさらに歪む
フィドル: http://jsfiddle.net/bG537/30/
ブラウザのサイズを変更してから、ブラウザをリロードして違いを確認してください
css と jquery を使用して 2 つの abs/static 要素を整列するにはどうすればよいですか?
HTML
<div class="space">
</div>
<div class="rel_class">
STATIC
</div>
<div class="abs_class">
ABS
</div>
CSS
.space {
margin-top:80px;
border: 1px solid red;
}
.rel_class {
width: 300px;
height: 300px;
margin-left:120px;
margin-top:9%;
border:1px solid blue;
}
.abs_class {
position: absolute;
width:100px;
height:100px;
border: 1px solid green;
}
jquery
$(function() {
var abs_ele = $(".abs_class");
var tp = 80 + 0.09*($(window).height());
abs_ele.css({top:tp+'px'});
});