不清楚职位：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/。

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

谢谢。

Answer 1

默认情况下，元素从上到下排列。浏览器总是自动从上到下显示块元素。

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

具有 position:absolute 的元素将从文档流中取出，并放置在与其父元素有一定偏移的位置。
具有 position:relative 的元素将简单地显示在它最初应该显示的位置，但添加了一些偏移量。

现在，到你的 fiddle.

#container1（黄色）在 #container2（橙色）中。作为块元素，两者都会尽可能占据整个宽度。默认情况下，#container1 应位于 #container2 的左上角，占据 #container2 的整个宽度。但是因为position: relative; right:30%，它会尽量让自己停留在#container2右边界的30%，所以现在：只有70%的宽度是可见的；另外 30% 在屏幕外（左侧）。

#col1 在 #container1 中。按照规定，它占据 66% 的宽度。但请记住，它需要从 #container1 的左上角开始，它目前在屏幕外（30%）！为了"bring it back"入屏，作者使用了left:32%，使其2%入屏。

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

总的来说：这是一个不适合初学者阅读的例子。

不清楚职位：CSS 中的亲戚

Unclear about Position: relative in CSS

css

position