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

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

当我垂直调整窗口的大小，图像覆盖了文本框。我反而希望文字上去。

来源

2012-06-16 simpatico

“go up”是指“定位在图像上而不是下面”或“在图像顶部，以便您仍然可以读取图像顶部的文字” – jcolebrand

，以便您仍然可以阅读文本（只要该边距仍然有空间：屏幕的50％）。 – simpatico

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

看到这个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。

来源

2012-06-16 22:49:29 Zuul

这个工作，但你能请神秘化margin-top和margin-left值吗？我看到你如何计算它们，但为什么？我不遵循逻辑。 – simpatico

@simpatico，这与答案无关，但是如果你给50％'top'和'left'，元素会移动到中心，然后减去框的'width'和'height'的一半，完全集中在其中间点的集装箱！（不知道它是否足够清楚，但我会在一会儿放置一个链接） – Zuul

边缘是神秘的，但是你的代码解决了这个问题。谢谢！ – simpatico

两个选项，我能想到的：

使用CSS媒体查询，如果视口小于一定的高度，然后更改文本框的高度或位置，使图像不覆盖它。
围绕父div设置一个min-height，一旦其小于某个高度，将显示一个垂直滚动条。

来源

2012-06-16 22:47:30

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

回答

相关问题