之前是高度自动时，相对位置有问题
我有一个 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 被我页面中的内容替换 例如： 扩展内容 等等文字等等 巴拉巴拉巴拉
和上面的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;
}
我希望在这之后出现页脚块，但我实际得到的是它位于页面的一半位置而不是内容上方，我添加的内容越多并不重要，它只是停留在似乎发疯的地方自己的家，我不能绝对定位，因为我永远不知道上面内容的高度！如果我删除将其定位到内容顶部的位置，则非常奇怪并且现在有点让我头疼。
i have a div that i use as a container to fit in footer stuff
#footcompatible { width:985px; height:50px; display:block; position:relative; left:0; top:0; <--- FIXED changed to top = 50px (the height) and added bottom -50px}
here is some HTML on the master page:
<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>
the contentplaceholder gets replaced with content from my page
for example:
expanding content
blah blah text etc
blah blah blahl
and the aboves 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;
}
the footer block i wish to come after this but what i actually get is it being half way down the page instead and over the content, the more content i add never matters it just stays where it seems to have mad a home for itself, i cant position absolute as i never know the hight of the content above! if i remove the positioning it just to the top of the content, very strange and is battering my head a bit now.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我无法理解你的描述。您可以改写一下，或者制作一个在线示例或草图吗？
无论如何，有两个基本规则：
position:absolute相对于主体或具有position:absolute或relative的下一个祖先元素> 设置。因此，在您的示例中，footCompatible内的任何position设置为absolute的内容都将采用footCompatible的左上角作为起始点（左 = 0，上 = 0）而不是整个文档。除了将元素从相对定位的元素中取出之外，没有其他办法解决这个问题。Position:absolute将一个元素从文档流中取出，有点使其浮动在所有其他元素之上（不要与float属性混淆，这是不同的.) 不可能让position:absolute元素将后续的页脚元素进一步向下推，具体取决于其高度。您必须将页脚嵌入到元素中，或者采取不同的方法。I am having trouble understanding your description. Can you rephrase, or make an online example or sketch?
Anway, two basic rules:
position: absoluteis relative to the body or to the next ancestor element with eitherposition: absoluteorrelativeset. So in your example, anything insidefootCompatiblewithpositionset toabsolutewill take the top left corner offootCompatibleas the starting point (left = 0, top = 0) and not the whole document. There is no way around this except to take the element out of the relatively positioned element.Position: absolutetakes an element out of the document's flow, kind of makes it float above all other elements (not to confuse with thefloatproperty, that's soemthing different.) It's impossible to have aposition: absoluteelement push a succeeding footer element further down, depending on its height. You would have to embed the footer in the element, or take a different approach.在您的
.iceabtsidecss 类中，您将位置定义为绝对位置。因此，页脚 div 不“知道”iceabtside div 的位置，并将其放置在其之前的相对 div 之后，即使您的iceabtside div 位于同一位置。In your
.iceabtsidecss class you define the position to be absolute. The footer div hence doesn't "know" where the iceabtside div is and positions it after its former relative div, even if your iceabtside div is in the same place.好吧，相对位置将元素的位置设置为相对于最初在文档中分配的位置的多个像素。将 top 和 left 都设置为 0 根本不会移动元素。例如，如果将 top 设置为 10，它会将元素从分配的位置向下移动 10 个像素。或者，如果将 right 设置为 50，它会将元素从该位置向左移动 50 像素。请注意，相对定位的元素不会导致其周围的任何元素重新定位，它只会与绝对定位的元素类似的任何元素重叠。
你的“iceabtside”课程似乎毫无价值。首先，你不需要将一个分区声明为一个块，因为这是默认的，并且将高度声明为 auto 也是默认的，它会根据其中的内容自动调整高度。看来您需要做的就是摆脱所有定位内容，只需设置边距以将其放在页面中间或您想要做的任何事情。这样，页脚元素就会出现在所有内容之后，就像您想要的那样。
Well, a relative position sets the position of the element so many pixels relative to the position it is originally assigned in the document. Setting top and left both to 0 will not move the element at all. If you set top to 10, for example, it will move the element down 10 pixels from the position it was assigned. Or if you set right to 50, it will move the element left 50 pixels from that position. Note that a relatively positioned element will not cause any elements around it to relocate, it will simply overlap anything similar to an absolutely positioned element.
Your 'iceabtside' class seems to be worthless. First off, you don't need to declare a division as a block because that's what it is by default, and declaring a height as auto is default as well, it will automatically adjust the height based on the content inside it. It seems like what you need to do is get rid of all the positioning stuff and just set margins on it to put it in the middle of the page or whatever you're trying to do. That way the footer element will come after all the content like you want it too.