Question

可以这样做吗？

看起来这应该是可能的。一般来说，我希望整个面板（div）像你在体内通常所期望的那样流动。但是，我想绝对将控件放在面板中。

我的经验是，当我尝试将控件绝对放置在流程面板中时，控件不会被视为面板包含其容器的相对坐标。

您可以使用WinForms中的流程面板执行此操作，我喜欢各种方法。在我看来，这将是两个世界中最好的，虽然我希望回复说这将是一件坏事。

Answer 1

鉴于此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">将保留在通常的文档流程中，而其每个子项将完全位于该面板中。

Answer 2

将<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。

Answer 3

如果将div设置为position：relative，则可以通过将div设置为position：absolute来将div的任何子元素绝对定位在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;