Geek Answers Handbook

CSS: relative positioning without stream update

How to place an object without updating the stream of other objects, but specify the coordinates relative to the parent?

To clarify,

position: relative; top: -30px; left: 600px;updates the stream of the following objects, position: absolute; top: -30px; left: 600px;does not update the stream, but relative positioning.

I do not need to update the stream, but specify relative positioning. I can also use Javascript solution.

EDIT

I think the best example: I have a document, now I want to place a <p> that is displayed on top of an existing document without changing the flow (think of a watermark). I also have some specific <div class = 'abc'>, for which I know that I want to put a new <p> at coordinate points (600, -30).

+5
source share
4 answers

I think I was looking width:0;height:0;so that the stream after was not rebuilt due to this element. At first, I was not sure that the object would be displayed at all if I set it to 0 dimensions.

+3
source

Apply position: relative;to parent and use position: absolute; top: whatever; left: whateverfor child. You can also use the z-index: somethingoriginal content of the parent element to overlap the child element with absolute positioning.

Not sure if I fully understand what you mean ... And I think it should be on http://www.doctype.com/ because it is not really about programming.

+8
source

, , (/) . , ..

0
<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, a div gets relative positioning, p becomes absolute (which is relative to a relative container, div). make sure p is a native class and not a child of a div.

0
source

More articles:


All Articles