代码之家 › 专栏 › 技术社区 › davethecoder

以前是自动高度时相对位置有问题

css-position css

-3

davethecoder · 技术社区 · 16 年前

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

我希望在这之后出现页脚块,但实际上我得到的是它在页面的中间位置,而不是在内容的上方,我添加的内容越多,就越不重要,它就停留在它似乎有一个自己疯狂的家的地方,我不能绝对定位,因为我永远不知道内容的高度。哎呀!如果我把它的位置移到内容的顶部,很奇怪,现在我的头有点痛。

3 回复 | 直到 14 年前

Patrick angularsen 16 年前

在你 .iceabtside 你定义的位置是绝对的。因此,页脚div不“知道”iceabtside div在哪里,并将其定位在以前的相对div之后,即使您的iceabtside div在同一位置。

Pekka 16 年前

我很难理解你的描述。你能重新措辞,或做一个在线的例子或素描吗?

安威,两条基本规则:

position: absolute 是相对于主体或下一个祖先元素的 位置:绝对 或 relative 集合。所以在你的例子里 footCompatible 具有 position 设置为 absolute 将占据的左上角 脚兼容 作为起点(左=0,上=0),而不是整个文档。除了将元素从相对位置的元素中取出之外,没有办法绕过此问题。
Position: absolute 从文档流中取出一个元素,使其浮在所有其他元素之上(不要与 float 不可能有一个 位置:绝对 元素将后续的页脚元素进一步向下推,具体取决于其高度。您必须在元素中嵌入页脚,或者采用其他方法。

animuson 16 年前

好吧,相对位置将元素的位置设置为相对于文档中最初指定位置的像素数。将top和left都设置为0根本不会移动元素。例如,如果将top设置为10,它将从指定的位置向下移动元素10个像素。或者如果您将right设置为50,它将从该位置向左移动元素50像素。请注意,相对定位的元素不会导致其周围的任何元素重新定位,它只会与绝对定位的元素重叠。

你的“Iceabtside”课程似乎一文不值。首先,您不需要将除法声明为块,因为这是默认值,并且将高度声明为自动也是默认值,它将根据内部内容自动调整高度。似乎你需要做的是摆脱所有的定位材料,只需设置页边距,把它放在页面的中间或任何你想做的事情。这样,footer元素将在所有内容之后出现,就像您希望的那样。