Question

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

然而，当我来到这个案例时，http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm向我展示了这个案例。我卡住了，不明白2位置是什么：相对而言。

关键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或{指定{1}}属性。

带有left的元素将从文档流中取出，并放置在距其父级的偏移处。
position:absolute元素只会在原来应该显示的位置显示自己，但会添加一些偏移量。

<小时/> 现在，你的小提琴。

position:relative（黄色）位于#container1（橙色）。作为块元素，两者都会尽可能地占据整个宽度。默认情况下，#container2应将自己定位在#container1的左上角，占据#container2的全宽。但由于#container2，它会尝试使自己从position: relative; right:30%的右边界保持30％，所以现在：只有70％的宽度是可见的;另外30％在屏幕外（左侧）。

#container2位于#col1。根据规定，它占用66％的宽度。但请记住，它需要从#container1的左上角开始，目前在屏幕外（30％）！为了＆＃34;带回来＆＃34;在屏幕上，作者使用#container1，使其2％进入屏幕。

正如您可能看到的，这是一种定型元素的复杂方式。如果你把它带得太远，没有人能够理解事物。例如。内容（名称错误left:32%）应该占用50％的宽度，但CSS说#col1因为这个奇怪的黑客。具有讽刺意味的是，小提琴中的副本表示它包含＆＃34;没有CSS黑客＆＃34;。此外，小提琴包含（ab）使用浮动，使用非语义标签，div-itis，内容和演示之间缺乏分离......

我总体而言：这是初学者阅读的一个不好的例子。

不清楚位置：相对于CSS

1 个答案: