2

我有一个只有 500x250 文本框和图像的白页。页面流畅。

我试图将文本框置于页面中心，同时将图片固定在屏幕的左下角。我通过以下 css 部分实现了这一点：

.bottom-right { /* used to fix the image to the bottom of the screen */
    bottom: 0;
    right: 0;
    position: fixed;
}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    width: 500px;
    height: 250px;
    position: relative;
}

当我垂直调整窗口大小时，图像会覆盖文本框。相反，我希望文本上升。

4

2 回答 2

1

如果我正确理解了您的问题，您需要始终在右下角固定的图像上方放置“文本框”。

请参阅此工作小提琴示例！

CSS

#content {
    width: 500px;
    height: 250px;
    position: absolute;          /* this is the key */
    z-index: 1;                  /* this is the key */
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -250px;
}

  • CSSposition:absolute;

    这样做是将元素放置在#content正常文档流之外，因此不受其他元素的影响或影响后续兄弟元素的布局。

  • CSSz-index:1;

    这样做是将元素在文档堆栈上向上移动，从而将其放置在具有较低值的其他元素之上（默认堆栈级别为 0）。

有关详细信息，请参阅CSS 绝对定位和固定定位 - W3C Wiki。

于 2012-06-16T22:49:29.607 回答
0

我能想到的两个选择：

  1. 使用 CSS 媒体查询，如果视口小于某个高度，则更改文本框的高度或位置，以使图像不会覆盖它。
  2. min-height在父级周围设置一个div，一旦它小于某个高度，就显示一个垂直滚动条。
于 2012-06-16T22:47:30.343 回答