html div实现子窗口效果,html – 当浏览器窗口大小改变时如何使子div可见？

给出父亲的相对位置,以便孩子的位置相对于它.

#parent {

position: relative;

width: 900px;

height: 800px;

}

#child {

position: absolute;

top: 0;

right: 0;

width: 300px;

height: 30px;

}

编辑：我误解了你的要求,现在当我读到它时,我发现你希望孩子div在页面上保持可见,不管是什么,而不仅仅是在父母的左上角.为此,您需要绑定到窗口调整大小事件,并在窗口宽度小于父宽度时更改子div的位置.通过差异改变正确的位置.

好的,这是jquery会做我认为你要求它做的事情：

$(function(){

$(window).resize(function(){

var delta = parseInt($('#parent').width(), 10) - parseInt($(window).width(), 10);

if (delta > 0) {

$('#child').css('right', delta);

}

});

});

两件事情：

>如果您快速调整窗口大小,子div不会总是返回到最右侧.我不确定这是否是一个时间问题,所获得的窗口的宽度是在它实际上移动得更远或什么之后,但是当你慢慢地调整大小时这会更好,这让我相信有更好的方法来做到这一点.>如果打开窗口使得它太小而无法首先看到子div,则不会处理移动子div.这可以使用相同的技术轻松修复,以找到子div的最佳位置,但只是在页面加载时而不是在调整大小时.