使用流量面板进行绝对定位

这似乎应该是可能的。一般来说，我希望整个面板（div）按照您在体内通常所期望的那样流动。但是，我想绝对将控件放置在面板内。

我的经验是，当我试图绝对地在流控面板中定位一个控件时，这些控件不被视为面板中包含它的相对坐标的容器。

你可以用WinForms中的流程面板来做到这一点，我喜欢混合的方法。在我看来，这将是两全其美，尽管我期待着回应说这将是一件坏事。

评论？

2009-05-06 ChadD

也许应该改变的问题是这样的：“你可以模仿与HTML一个WinForms FlowPanel控制的行为， CSS？” – jfar 2009-05-06 04:39:56

将<div>的CSS'position'属性更改为'relative'。如果你的HTML看起来像：

<body> 
    <div id="container"> 
     <a id="control">start</a> 
    </div> 
</body>

然后更新CSS来：

#container { 
    position: relative; 
} 
#control { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

的#control元素现在是相对于#container的。

2009-05-06 04:36:19 johnvey

我不知道这是否是唯一正确的答案，但我很快就明白了，并且我测试了它，并且它可以正常工作。非常感谢！我喜欢这个网站！ – ChadD 2009-05-06 05:38:16

鉴于此HTML：

<div class="panel"> 
    <h2>Panel title</h2> 
    <div class="close">x</div> 
    <div class="content">Panel content</div> 
</div>

你可以使用这个CSS：

div.panel{ 
    position:relative; 
} 
div.panel h2, 
div.panel div.close, 
div.panel div.content{ 
    position:absolute; 
}

<div class="panel">将保持在平时的公文流转，而它的每一个孩子都将绝对定位该面板内。

2009-05-06 04:35:38

如果您将div设置为position：relative，则div中的任何子元素都可以通过将div设置为position：absolute来绝对定位在div内。

例子：

HTML：

<div id='panel'> 
    <div id='control'>I'm positioned absolutely!</div> 
</div>

CSS：

#panel { position: relative; width: 300px; height: 100px;} 
#control { position: absolute; top: 10px; left: 20px;

2009-05-06 04:37:18 mishac

回答