ansaurus

Question

CSS: Relative positioning without updating flow

Answer 1

A:

Maybe i'm not understanding your question correctly, but the flow is also depending on the positioning type (absolute/relative) of the parent. Please note that this can also be inherited, from its parent, etc.

Rob van Groenewoud 2009-11-14 15:01:12

What I meant is for example, say I want to insert a <p> as a watermark in the document without disturbing anything else in terms of layout - and say I want to put this <p> at coordinates 600,-30 from a specific <div class='abc'>

KalEl 2009-11-14 15:06:50

Answer 2

+2 A:

Apply position: relative; to the parent element, and use position: absolute; top: whatever; left: whatever on the child element. You can also use a z-index: something to make the original content of the parent element overlap the child element with the absolute positioning.

Not sure if I totally get what you mean, though... And I think this is supposed to be on http://www.doctype.com/, because it isn't really about programming.

Douwe Maan 2009-11-14 15:12:47

Answer 3

A:

<style type="text/css">
<!--
.abc{background-color:#CFC;width:400px;position:relative;margin-left:80px;min-height:190px;padding:10px;}
.abc p.watermark{padding:20px;width:100px; position:absolute; top:60px;left:-30px;background-color:#FCF;}
.def{background-color:#9CF;width:300px;margin-top:12px;}
.def p{padding:20px;}
-->
</style></head>

<body>
<div class="abc">
  <p class="watermark">this reacts only to the div it is in</p>
  <p>more text in this div</p>
  <p>that will be overlapped by the paragraph with the class of &quot;watermark.&quot; can't style all &lt;p&gt; in the dive. or each block would overlap each other, and only the top one could be read.</p>
</div>
<div class="def">
   <p class="hi">this one is not affected by the paragraph above</p>
</div>

Basically, the div gets relative positioning, the p gets absolute (which is relative to it's relative container, the div). make sure the p is it's own class, not a child of the div.

csleh 2009-11-14 15:47:56

Answer 4

A:

I think what I was looking for is width:0;height:0; so that the flow after is not realigned because of this element. I wasn't sure initially however, that the object will be displayed at all if I set it to have 0 dimensions.

KalEl 2009-11-20 13:49:42

ansaurus

tags:

views:

answers:

CSS: Relative positioning without updating flow

related questions