Как мне разместить div в верхнем левом углу страницы? - PullRequest
Новая
       2

Как мне разместить div в верхнем левом углу страницы?

1 голос
/ 20 февраля 2010

Я борюсь с проблемой CSS. У меня есть простая первая страница, которая состоит из 4 дел. 3 из которых видны. Другое наложение. 

<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="overlay" visible="false"></div>
<div id="container">Container</div>
<div id="menu">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="ajax.getData()" />        
</div>  
</form>

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

 #menu
{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 150px;
    height: 300px;
    padding: 5px;
    border: solid 1px #666;
    background: #ffffff;
    -moz-border-radius: 5px;
}

Однако, когда размер экрана изменяется (меньше), этот div остается заблокированным в положении, но другие div изменяют размер (желательно), но div меню не делает. Изменение позиционирования на «относительное» приводит к тому, что div падает ниже div «контейнера». Может кто-нибудь сказать мне, что не так с моим CSS?

Результаты одинаковы в IE и FF.

Спасибо!

-Nick

Ответы [ 2 ]

0 голосов
/ 20 февраля 2010

Существует как минимум три способа решения этой проблемы.

Метод 1: - Изменить порядок деления 

<div id="header">
<div id="menu">   ---- Menu here
<div id="overlay">
<div id="container">

... и float-left заголовок и меню, оба относительно. Наличие непоплаванных блочных элементов между ними могло бы повлиять на относительное плавание, и элементы div не обязательно выстраиваются в линию.

Способ 2: - пропустить все 

<div id="header">
<div id="overlay">
<div id="container">
<div id="menu">

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

Метод 3: Абсолютное позиционирование и изменение размера

Сохраняйте вещи такими, какие они есть, добавьте position: relative в форму CSS. Таким образом, абсолютный элемент div внутри формы будет интерпретировать форму как ее родительский элемент и изменять ее размер. Однако ваш раздел меню не может изменить размер в соответствии с шириной формы в настоящее время, поскольку он имеет фиксированные размеры в пикселях. Они должны быть в процентах, чтобы изменить размер.

Надеюсь, это поможет.

0 голосов
/ 20 февраля 2010

использовать float: left; затем в меню очистите «float» с помощью clear: both; сразу после. 

<div id="menu" style="float: left;">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="ajax.getData()" />        
</div>  
<div id="header" style="float: right;">Header</div>
<div style="clear: both;" />
<div id="overlay"></div>
<div id="container">Container</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...