Absolute positioning with flow bar
Can this be done?
It seems like it should be possible. In general, I want the entire panel (div) to flow as you would normally expect in a body. However, I would like to fully position the controls inside the panel.
My experience is that when I try to fully position a control on a flow pane, the controls are not handled by the pane with the relative coordinates of its container.
You can do this using the flow pane in WinForms and I like a mix of approaches. This would be the best of both worlds in my opinion, although I expect the answers to say it would be bad.
Comments?
a source to share
Change the CSS property 'position' <div>
to 'relative'. If your HTML looks like this:
<body>
<div id="container">
<a id="control">start</a>
</div>
</body>
then update your CSS to:
#container {
position: relative;
}
#control {
position: absolute;
top: 0;
left: 0;
}
The #control element will now refer to the # container.
a source to share
With this HTML in mind:
<div class="panel">
<h2>Panel title</h2>
<div class="close">x</div>
<div class="content">Panel content</div>
</div>
You can use this CSS:
div.panel{
position:relative;
}
div.panel h2,
div.panel div.close,
div.panel div.content{
position:absolute;
}
<div class="panel">
will remain in the normal flow of documents, while each of its children will be completely contained within this pane.
a source to share
If you set the div to position: relative, any child divs can be absolutely positioned inside the div by setting them to position: absolute.
Example:
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;
a source to share