Question

我正在尝试tableless layout，我有以下内容 HTML片段：

<div class="slider-inner">
    <div class="slider-pane">
        <div class="container">
            <p>...</p>
            <div class="did-you-knoow">
                <div class="facts">
                </div>
                <div class="marquee-container">
                </div>
            </div>
        </div>
    </div>
</div>

使用此CSS设置样式：

div.slider-pane {
    width: 1024px;
}

div.container {
    display: block;
}

div.facts {
    margin-right: 60%;
}

div.marquee-container {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 10px;
    width: 60%;
}

我希望div.facts占据左边40％和div.marquee-container 占据div.did-you-know（他们的直接父母）的右边60％。一世期望div.marquee-container相对于其父级定位，并且它的宽度为其父级的60％，但其定位和宽度是相对的到div.slider-inner，比其父级高2级。

如何设置div.marquee-container相对于的位置和宽度它的父母，而不是它上面的div三级？

Answer 1

将position:relative添加到div.container

Answer 2

@ locrizak的答案是正确的，我需要将{position：relative'添加到div.container，但我还需要将其添加到div.did-you-know。换句话说，我需要将所有包含div设置为position:relative，以便相关元素相对于直接父级定位。

我发现在“绝对”定义下the MDN page for css position也回答了这个问题：

[浏览器]将[元素]定位在相对于最近位置祖先或指定块
的指定位置

然而the W3C reference并没有那么有用。

在无表格布局中定位元素

2 个答案: