CSS: относительное позиционирование без обновления потока - PullRequest
Новая
       4

CSS: относительное позиционирование без обновления потока

5 голосов
/ 14 ноября 2009

Как разместить объект, не обновляя поток других объектов, но указав координаты относительно родителя?

Чтобы уточнить,

position: relative; top: -30px; left: 600px; обновляет поток следующих объектов, position: absolute; top: -30px; left: 600px; не обновляет поток, но относительное позиционирование.

Мне нужно не обновлять поток, а указать относительное позиционирование. Я также могу использовать решение Javascript.

EDIT

Я думаю, что лучшим примером будет это: У меня есть документ, теперь я хочу разместить

, который отображается поверх существующего документа без изменения потока (подумайте о водяном знаке). У меня также есть какой-то определенный

, относительно которого я знаю, что хочу разместить новый

в скажем, координаты (600, -30).

Ответы [ 4 ]

8 голосов
/ 14 ноября 2009

Примените position: relative; к родительскому элементу и используйте position: absolute; top: whatever; left: whatever на дочернем элементе. Вы также можете использовать z-index: something, чтобы исходное содержимое родительского элемента перекрывало дочерний элемент с абсолютным позиционированием.

Не уверен, что я полностью понял, что вы имеете в виду, хотя ... И я думаю, что это должно быть на http://www.doctype.com/,, потому что это не совсем о программировании.

3 голосов
/ 20 ноября 2009

Я думаю, что я искал width:0;height:0;, так что поток после не выравнивается из-за этого элемента.Однако изначально я не был уверен, что объект будет отображаться вообще, если я установлю для него 0 измерений.

0 голосов
/ 14 ноября 2009 
<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>

По сути, div получает относительное позиционирование, p получает абсолютное значение (что относительно его относительного контейнера, div). убедитесь, что p это его собственный класс, а не дочерний элемент div.

0 голосов
/ 14 ноября 2009

Возможно, я не правильно понимаю ваш вопрос, но процесс также зависит от типа позиционирования (абсолютного / относительного) родителя. Обратите внимание, что это также может быть унаследовано от его родителя и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...