Question

我有一个div用作容器以适应页脚内容

#footcompatible { width:985px; height:50px; display:block; position:relative; left:0; top:0;  <--- FIXED changed to top = 50px (the height) and added bottom -50px}

这是主页上的一些HTML：

<asp:ContentPlaceHolder ID="MainContent" runat="server" />              
    <div id="footcompatible">
    <div class="footerbarsTop"><!-- insert footer bar --></div>
    <div id="footerblock"><%Html.RenderPartial(ViewData["footer"].ToString()); %></div>     
    <div class="footerbarsBot"><!-- insert footer bar --></div>
    </div>

contentplaceholder将替换为我页面中的内容例如：扩大内容等等等等 blah blah blahl

和上面的css：

.iceabtside {display:block; width:271px; height:auto; position:absolute; left:697px;      top:0; border:0px solid white; text-align:left;}
 also this is what i missed of on my initial paste 
.iceabtfm 
{
    display:block; width:661px; height:auto; position:relative; left:24px; top:0;    text-align:left;
 }

页脚块我希望在此之后来到但实际得到的是它在页面的一半而不是在内容上，我添加的内容越来越不重要它只是停留在似乎疯狂的家的地方本身，我不能绝对的位置，因为我从来不知道上面的内容的高度！如果我将它定位在内容的顶部，非常奇怪，现在正在打击我的头。

Answer 1

我无法理解您的描述。你能改写，或者做一个在线的例子或草图吗？

Anway，两个基本规则：

position: absolute相对于正文或下一个祖先元素设置position: absolute或relative。因此，在您的示例中，footCompatible内position设置为absolute的任何内容都会以footCompatible的左上角为起点（左= 0，顶部= 0）而不是整个文件。除了从相对定位的元素中取出元素之外，没有办法解决这个问题。
Position: absolute从文档的流中取出一个元素，使其浮动在所有其他元素之上（不要与float属性混淆，这是不同的。）这是不可能的有一个position: absolute元素将后续的页脚元素向下推，具体取决于它的高度。您必须将页脚嵌入元素中，或采取不同的方法。

Answer 2

在.iceabtside css类中，您将位置定义为绝对位置。因此，页脚div不会“知道”iceabtside div的位置，并将其置于其前相对div之后，即使你的iceabtside div位于同一位置。

Answer 3

嗯，相对位置设置元素的位置相对于文档中最初分配的位置的位数。将顶部和左侧都设置为0将不会移动元素。例如，如果将top设置为10，则会将元素从分配的位置向下移动10个像素。或者，如果将右侧设置为50，则会将元素从该位置向左移动50个像素。请注意，相对定位的元素不会导致其周围的任何元素重新定位，它将简单地重叠与绝对定位元素类似的任何元素。

你的'iceabtside'课程似乎毫无价值。首先，您不需要将分区声明为块，因为默认情况下它是默认的，并且将高度声明为auto也是默认值，它将根据其中的内容自动调整高度。看起来你需要做的就是摆脱所有定位的东西，只需在它上面设置边距就可以把它放在页面中间或者你想要做的任何事情上。这样，页脚元素将在您想要的所有内容之后出现。

在以前是高度自动时有位置相关的麻烦

3 个答案: