css - 不清楚位置 : relative in CSS

Question

我目前正在研究CSS，发现我不清楚position:relative是什么。我知道我们可以在父级上使用 position: relative 并在其子级上使用 position: absolute 来相对于其父级而不是浏览器进行绝对定位。

但是，当我来到这个网站的时候，http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm , 给我看。我卡住了，不明白 2 position: relative 是什么意思。

关键的 CSS 如下所示:

            body {
                margin:0;
                padding:0;
            }

            #container2 {
                float:left;
                width:100%;
                background:orange; /* column 2 background colour */
            }
            #container1 {
                float:left;
                width:100%;
                position:relative;
                right:30%;
                background:#fff689; /* column 1 background colour */
            }
            #col1 {
                width:66%;
                position:relative;
                left:32%; /* 50% + 2%, */
            }

要直观了解 CSS 的工作原理，您可以访问 http://jsfiddle.net/hphchan/631j5nLs/ .

希望有人能告诉我两个position:relative是什么意思。 我一直在寻找一段时间，但仍然无法得到答案。

谢谢。

Answer 1

默认情况下，元素从上到下排列。浏览器将始终自动从上到下显示 block 元素。

为了手动定位元素，你需要设置position属性，然后给它一些偏移量，由top,right指定>、bottom 或 left 属性。

• 具有 position:absolute 的元素将从文档流中取出，并放置在与其父元素有一定偏移的位置。

• 具有 position:relative 的元素将简单地显示在它最初应该显示的位置，但添加了一些偏移量。

---

现在，开始你的 fiddle 。

#container1(黄色)在 #container2(橙色)中。作为 block 元素，两者都会尽可能占据整个宽度。默认情况下，#container1 应将自己定位在 #container2 的左上角，占据 #container2 的整个宽度。但是因为 position: relative; right:30%，它会尝试让自己与#container2的右边界保持30%的距离，所以现在:只有70%的宽度是可见的；另外 30% 在屏幕外(左侧)。

#col1 在 #container1 中。按照规定，它占据 66% 的宽度。但请记住，它需要从 #container1 的左上角开始，它目前在屏幕外(30%)!为了将其“带回”到屏幕中，作者使用了left:32%，使其2%进入屏幕。

---

您可能已经看到，这是一种复杂的元素定位方式。如果你把它带得太远，没有人能够理解事情的意义。例如。内容(错误地命名为 #col1)应该占用 50% 的宽度，但 CSS 显示 width:66% 因为这个奇怪的 hack。具有讽刺意味的是， fiddle 中的副本说它包含“没有 CSS hack”。此外， fiddle 包含(滥用)使用 float 、使用非语义标签、div-itis、内容和表示之间缺乏分离......

总的来说，这对初学者来说是一个不好的例子。