Question

如果我的 index.html 页面上有两个嵌套的div元素：

<body>
  <div id="parent">
        <div id="child"></div>

  </div>
</body>

父div的宽度为900，高度为800

我希望孩子div位于父div的右上角，因此，我为子div定义了CSS，如下所示：

#child {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 30px;
}

CSS可以让孩子div位于父div的右上角。

但是，如果我更改（缩小）浏览器窗口大小，则子div会在某个时刻消失（隐藏）。

如何让孩子div始终可见但仍然可以找到在父div的右上角，无论浏览器窗口大小如何变化？

Answer 1

给出父亲的相对位置，使孩子的位置相对于它。

#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的最佳位置是固定的，但只是在页面加载时，而不是调整大小时。

Answer 2

根据您希望如何调整父级的大小，您可以执行以下操作之一：

设置#parent size，使用max-width而不是width

#parent {
    position: absolute;
    max-width: 300px;
    height: 100%;
}

尺寸#parent width with percentnts

#parent {
    position: absolute;
    width: 100%;
    height: 100%;
}

或者只需使用以下内容调整#parent的大小：

#parent {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

在这种情况下，使用2或3几乎完全相同，但是如果你想在#parent周围留出一些额外的空间，2可以提供更大的灵活性。

当浏览器窗口大小改变时如何使子div可见？

2 个答案: