Question

绝对定位很棒，但似乎相对于浏览器窗口定位它。这对我不起作用，因为我的页面内容居中。我试图建立一个类似于Allegorithmic的结构。请注意，页面的左下角有一个灰色条，其中标题为“关于”，然后是“快速链接”和“保持连接”的右侧。因此，如果我将灰色条部分放在页面中心 - 我如何按原样放置这三个部分？（一个在另一个的右边）。同样，我能想到的就是将它们放在我希望它们的绝对位置，但是在它们各自的div标签而不是主窗口中是否存在“绝对”定位的方式？

Answer 1

确保相对放置容器。

这将确保绝对定位的项目相对于您的容器。

#container{
  position:relative;
}

Working example

Answer 2

使用CSS定位HTML元素时，它将 relative 定位到最接近的父元素。例如：

<div id="A" style="height:100px; width:400px; margin: 10px auto;">
  <div id="a" style="position: absolute; top: 10px; left: 10px;">
    <p id="a">Hello World!</p>
  </div>
<div>

在上面的示例中，<div id="a" ...>将相对于浏览器窗口定位，相对于浏览器窗口的绝对偏移top: 10px和left: 10px，。

<div id="B" style="position: relative; height:100px; width:400px; margin: 10px auto;">
  <div style="position: absolute; top: 10px; left: 10px;">
    <p id="b">Hello World!</p>
  </div>
<div>

在此示例中，<div id="a" ...>将相对于<div id="B" ...>定位（在相同的绝对偏移处，但这次相对于<div id="B"> 。这是因为在第二个示例中，<div id="B">具有position CSS属性。

Answer 3

是。寻找相对定位（然后你应该设置父div的宽度和里面按钮的相对位置）。

你也可以这样做（也许更好）：

<div id="footer">
   <div class="element">...</div>
   <div class="element">...</div>
   <div class="element">...</div>
</div>

以页脚为中心的css和元素：

div.element{
   float:left;
   //... Rest of style
}

编辑：你也可以用javascript做定位。但这只是我多余的想法 - 你只能用css来实现这个目标。

CSS如何保持页面居中，但仍然把东西放在我想要的地方

3 个答案: