Html CSS定位2个移位列

首先，是否有一个很好的关于定位元素的教程，它真正解释了发生了什么？我读了好几本书，但没法理解

我的具体问题如下：

我有一个标题div元素（红色），下面有两列（白色和绿色）。正常情况下，浮动：左；我可以将元素放置在彼此相邻的位置。但是现在我想要一个（白色的那个）在显示的标题上移动一点

使用顶部负值的相对定位，我可以在正确的位置得到白色的，但是如何定位第二列。当调整浏览器大小时，它会变得一团糟

#Column1
{
  float: left;
  position: relative;
  top: -140px;
  background-color: #FFFFFF;
  left: 70px;
  width: 280px;
  min-height: 500px;
  padding: 10px;
}

#Column2
{
  float: left;   
  width: 800px;
  background-color: #00FF00;
}

---

我要在这里吐口水：

HTML

---

它有效吗？

你可以用一个负的边距

下面是一个使用positionabsolute演示无浮动布局的示例。 根据我的经验，“绝对位置”更灵活，适合这种布局，特别是当您希望使用顶部、右侧、底部和左侧停靠元素时。 在某些情况下，您需要回退使用浮动，但在这种情况下不需要

使用浮动来浮动周围的物体，并将绝对位置用于停靠物体

HTML文件

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

---

更新删除显示：中的.more类中没有显示，并查看容器是否灵活。

这是一个复杂的请求，因此如果您无法解决它，请不要感到难过。除了此解决方案的侧边栏，您不必设置任何内容的

宽度

；我的解决方案依赖于不常见的

overflow:hidden

来实现这一点

HTML:

---

一篇关于为什么

溢出的好文章：隐藏在这种情况下的帮助可以在这里找到：仍然没有告诉我为什么float不是黑客，在大多数情况下是错误的工具。在我意识到在许多情况下使用相对位置和绝对位置要容易得多之前，我已经多次使用浮动。即使在灵活的布局中。我不知道你为什么一直把
float
称为黑客。我想这只是个人喜好的问题。使用
float
似乎省去了添加任意容器的麻烦。是的，我同意
position:absolute
有利于“停靠”元素，但肯定有更好的方法。@Wex当然！CSS网格系统更好。为什么你认为浮动比绝对位置好？当然，你可以让它与浮动一起工作，但它不觉得像一个黑客吗？溢出：隐藏：-）
float
通常更好，因为它允许内容动态调整大小（而不是使用
position:absolute
，后者总是要求您为每个元素设置特定位置）
overflow:hidden
当然不是黑客。我知道overflow hidden是做什么的，但在我看来它不是很有语义？关于我的布局，它告诉了你什么？它正在使用浮动？或者它想“隐藏”内容。在其中添加一些不必要的
float
和
position
声明，但这不是一种很好的方法。我第一次尝试在没有测试的情况下正确地执行它：-）我做了，但你是对的，它并不完美。
#red {
    width: 100%;
    float: left;
    height: 100px;
    position: relative;
    background-color: #f00;
}
#white {
    width: 20%;
    float: left;
    margin-left: 4%;
    margin-top: -40px;
    position: relative;
    background-color: #fff;
    height: 400px;
}
#green {
    width: 76%;
    float: left;
    position: relative;
    background-color: #0f0;
    height: 400px;
}

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

#Header {
  background-color: red;
  height: 200px;
}
#Column1 {
  position: relative;
  background-color: #FFFFFF;
  top: -140px; left: 70px;
  width: 280px;
  min-height: 500px;
}
#Column2 {
  position: absolute;   
  background-color: #00FF00;
  left: 350px; top: 200px; right: 0;
  min-height: 360px;
}​

<div id="header"></div>
<div id="white"></div>
<div id="green"></div>

#header { 
    background: red;
    height: 70px;
    border: 1px solid #000; }
#white {
    background: #fff;
    float: left;
    margin: -30px 0 0 70px;
    width: 100px;
    height: 230px;
    border: 1px solid #000; }
#green { 
    background: green;
    overflow: hidden; 
    height: 201px;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0; }