ansaurus

Question

Answer 1

+1 A:

Given this HTML:

<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 usual document flow, while each of its children will be absolutely positioned within that panel.

Ron DeVera 2009-05-06 04:35:38

Answer 2

+1 A:

Change the CSS 'position' property of the <div> to 'relative'. If your HTML looks like:

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

then update the CSS to:

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

The #control element will now be relative to the #container.

johnvey 2009-05-06 04:36:19

I don't know if this is the ONLY correct answer, but I understood it quickly and I tested it and it works. Thanks so much! I love this site!

Velika 2009-05-06 05:38:16

Answer 3

A:

If you set the div to have position: relative, any child elements of the div can be absolutely positioned within the div by setting them to have 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;

mishac 2009-05-06 04:37:18

ansaurus

tags:

views:

answers:

Absolute positioning with a flow panel.

related questions