Абсолютное позиционирование с потоковой панелью - PullRequest
Новая
       10

Абсолютное позиционирование с потоковой панелью

0 голосов
/ 06 мая 2009

Можно ли это сделать?

Кажется, это должно быть возможно. В общем, я хочу, чтобы вся панель (div) текла так, как вы обычно ожидаете внутри тела. Тем не менее, я бы хотел расположить элементы управления внутри панели.

По моему опыту, когда я пытаюсь абсолютно позиционировать элемент управления внутри панели потока, элементы управления не обрабатываются как содержащиеся в панели с относительными координатами этого контейнера.

Вы можете сделать это с помощью панели управления в WinForms, и мне нравится сочетание подходов. На мой взгляд, это было бы лучшее из обоих миров, хотя я ожидаю, что отклики о том, что это будет плохо,

Комментарии

Ответы [ 3 ]

1 голос
/ 06 мая 2009

Измените CSS-свойство 'position' <div> на 'относительное'. Если ваш HTML выглядит так: 

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

затем обновите CSS до: 

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

Элемент #control теперь будет относиться к контейнеру #.

1 голос
/ 06 мая 2009

Учитывая этот HTML: 

<div class="panel">
  <h2>Panel title</h2>
  <div class="close">x</div>
  <div class="content">Panel content</div>
</div>

Вы можете использовать этот CSS: 

div.panel{
  position:relative;
}
div.panel h2,
div.panel div.close,
div.panel div.content{
  position:absolute;
}

<div class="panel"> останется в обычном потоке документов, в то время как каждый из его дочерних элементов будет абсолютно расположен в этой панели.

0 голосов
/ 06 мая 2009

Если для элемента div задано положение: относительное, любые дочерние элементы элемента div можно абсолютно позиционировать в элементе div, установив для них положение: абсолютное.

Пример:

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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...