Question

我有一个只有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;
}

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

Answer 1

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

请参阅此working Fiddle示例！

<强> 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;
}

CSS position:absolute;

这样做的目的是将元素#content置于正常文档流程之外，从而不会受到其他元素的影响或对后来的兄弟姐妹的布局产生影响。
CSS z-index:1;

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

有关详细信息，请参阅CSS absolute and fixed positioning - W3C Wiki。

Answer 2

我能想到的两个选择：

使用CSS媒体查询，如果视口小于某个高度，则更改文本框高度或位置，以使图像不会覆盖它。
在父min-height周围设置div，一旦小于某个高度，就会显示一个垂直滚动条。

如何将中心文本和固定图像放在一起？

2 个答案: