浮动div定位 [英] Floating div positioning

问题描述

我需要一个浮动的矩形（100％宽度，100px高度）才能正好显示在页面底部以上20px的位置。我该怎么做？

I need a floating rectangle (100% width, 100px height) to appear exactly 20px above the bottom of a page. How can I do that?

下面的代码显示了浏览器窗口底部的矩形而不是页面 - 所以如果页面高于可以适合的页面屏幕上，矩形出现在页面中间的某处。

The code below shows the rectangle at the bottom of the browser window not the page - so if the page is taller than what can fit in the screen, the rectangle appears somewhere in the middle of the page.

<div style="z-index: 1; position: absolute; right: 0px; bottom: 20px; background-color: #000000; width: 100%; height: 100px; padding: 0px; color: white; ">&nbsp;</div> 

推荐答案

添加 position：relative; 到矩形div的父项。这将从父元素的底部定位div 20px。

Add position: relative; to the rectangle div's parent. This will position the div 20px from the bottom of the parent element.

这篇关于浮动div定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！