интересное размещение div

@Sanu0074 · Регистрация: 14.06.2010

Author24 — интернет-сервис помощи студентам

доброго времени суток всем!
есть два DIVа:

HTML5

1 2	<div style="background-color:#F00; width:250px; height:250"> red </div> <div style="background-color:#0F0; width:100px; height:100"> green </div>

нужно расположить green поверх red, неиспользуя margin: (-XX)px....
как это сделать??
p.s. я делаю для того, чтоб с помощь jquery один div выезжал поверх другого не отодвигаю его вниз....

@vasvas7775 · 24.03.2011, 10:48

Можно попробовать так:

HTML5

1 2	<div style="position:absolute; background-color:#F00; width:250px; height:250"> red </div> <div style="position:absolute; background-color:#0F0; width:100px; height:100"> green </div>

Добавлено через 1 минуту
Можно так:

HTML5

1 2	<div style="position:absolute; background-color:#F00; width:250px; height:250"> red <div style="position:absolute; left:0px; background-color:#0F0; width:100px; height:100"> green </div></div>

@Dimazzzzzz · 24.03.2011, 20:07

Sanu0074, не знаю правильно ли я тебя понял, но можно еще с помощью относительного позиционирования сделать:

HTML5

1 2	<div style="background-color:#F00; width:250px; height:250"> red </div> <div style="position:relative; top:-250px;background-color:#0F0; width:100px; height:100"> green </div>

@Sanu0074 · 24.03.2011, 22:35 **[ТС]**

хотя пробовал, и тот div что вылетает с помощью Jquery всеравно пододвигает тот что на странице!

HTML5

<span id="chose_file_upload">
txt
</span>
<div id="upload_f_in_cat">
 
</div>
 
<div style="position:absolute">
 txt
<table  width='300px' border='0'>
 
txt
 
</table>
</div>
 
 
        txt
</div>
 
 
 
</td>
  
  </tr>
  <tr>
    <td colspan="2"  height="50" bgcolor="#5f86c8"><?php include("block/footer.php"); ?>
 
 
    </td>
  </tr>
</table>
 
 
  
</div>

этот div выезжает по нажатию кнопки,

HTML5

<span id="chose_file_upload">
txt
</span>
<div id="upload_f_in_cat">
 
</div>

а этот под ним находится:

HTML5

<div style="position:absolute">
 txt
<table  width='300px' border='0'>
 
txt
 
</table>
</div>
 
 
        txt
</div>
 
 
 
</td>
  
  </tr>
  <tr>
    <td colspan="2"  height="50" bgcolor="#5f86c8"><?php include("block/footer.php"); ?>
 
 
    </td>
  </tr>
</table>
 
 
  
</div>

везде absolute стоит, но проблема в том что этот блок:

HTML5

1	<td colspan="2" height="50" bgcolor="#5f86c8"><?php include("block/footer.php"); ?>

вообще в самый вех дива уехал, а должен быть внизу!!!

@vasvas7775 · 25.03.2011, 07:57

К тому, который вылезает поставь, к примеру:

CSS

1	z-index:2;

.
Это должно заставить слой который выезжает, быть выше того который стоит изначально.

@Sanu0074 · 25.03.2011, 08:57 **[ТС]**

Сообщение от vasvas7775

К тому, который вылезает поставь, к примеру:

CSS

1	z-index:2;

.
Это должно заставить слой который выезжает, быть выше того который стоит изначально.

а есть пример того как он работает? (что надо на одном диве и что на другом ставить)

@vasvas7775 · 25.03.2011, 11:03

Если нажать кнопку Показать/Скрыть, увидишь блок, который прячется.

HTML5

<script language="JavaScript" type="text/javascript">
function showhide(id_div)
{
if(document.getElementById(id_div).style.display=="none")
{
document.getElementById(id_div).style.display="block";
}
else
{
document.getElementById(id_div).style.display="none";
}
}
</script>
 
<style>
#blocks { position:absolute; top:10px; left:50%; margin-left:-300px; width:600px; height:300px; border:solid 1px; background:#DDDDDD;}
#blocks1 { position:absolute; margin-top:50px; width:500px; height:100px; border:solid 1px; margin-left:auto: margin-right:auto;
           left:50%;margin-left:-250px; background:#66FF66; z-index:2; padding:10px;}
</style>
<!--[if IE]>
<style>
body {text-align:center;}
#blocks { position:absolute; top:10px; width:600px; height:300px; border:solid 1px; background:#DDDDDD;}
#blocks1 { width:500px; height:100px; border:solid 1px;
            background:#66FF66; z-index:2; padding:10px;}
</style>
<![endif]-->
 
<body>
<div id="blocks1" style=" display: none">Скрывающийся блок, он вылазиет на верх, выше всех блоков, благодаря  z-index:2;</div>
<div id="blocks">
 <a onClick="showhide('blocks1');" href="#" title="Нажми сюда, что бы показать скрыть слой">Показать/скрыть слой</a>
</div>
</body>

@RoooM · 16.08.2012, 01:32

Расположить один див поверх другого кроссбраузерно, причем чтобы ИЕ6 понимал position:absolute;!!!
надо так:
никаких z-index, java и прочих наворотов!
Поскольку ИЕ вообще туго работает с div-ами то ставьте свои два дива внутрь таблицы!
Тогда не надо указывать и top и left absolute, выши дивы будут заключены в таблице, как в консерве.
Вот код:

HTML5

<table height="50px">
<tr>
<td>
<div class="homme-img">
Можно и тут картинку поставить, или прописать в стиле фоном.
</div>
<div class="homme">
<h1>Заголовок</h1>
</div>
</td>
</tr>
</table>

Код css

CSS

.homme-img {
background: url('.../img/schuka.png') no-repeat scroll left bottom;
float:left;
width:555px;
height:49px;
position:absolute;
}
 
.homme {
float:right;
width:555px;
}

И будет див с картинкой поверх дива с заголовком
Ну и на этом примере возможны вариации...
Удачи!

@and_y87 · 20.08.2012, 17:29

Не по теме:

RoooM, ИЕ6, 7, 8 - табун полудохлых хромых лошадей которых надо пристрелить...
и забыть про них...

Многие сайты готовы сделать всплывающее окошко глосящее:
"Ваш браузер устарел!
Для корректной работы сайта рекомендуем вам обновить ваш браузер"

ИМХО: ИЕ6-8 слишком много внимания себе просят, и создают гемора

@RoooM · 20.08.2012, 17:38

Смотрите статистику! BIGMIR констатирует факт -
80% украинцев до сих пор сидит на ИЕ6
(возможно это старые компы, села, регионы)
Тоесть на них можно просто забить?
и послать их на всплывающее окошко?

@and_y87 · 20.08.2012, 17:48

RoooM, я суров, что поделать

пускай обновляются...

@Sanu0074 · 20.08.2012, 18:00 **[ТС]**

Сообщение от RoooM

80% украинцев до сих пор сидит на ИЕ6

бред, этого быть неможет....

@RoooM · 20.08.2012, 19:07

Сегодня статистика БИГМИРА отличается от Декабря 2011, возможно они небесплатно пиарят ХРОМ.
Хотя в мире и по сегодня лидер ИЕ.
Но как бы там ни было... я считаю все должны иметь доступ к сайту. Даже 20% пользователей нельзя терять!!!
http://www.artlebedev.ru/tools/browsers/
http://webrowser.ru/rynok/stat... -goda.html
http://ukrainianiphone.com/02/04/2012/57275
http://top.bigmir.net/global/browser

@RoooM 0 / 0 / 0 Регистрация: 16.08.2012 Сообщений: 7
	20.08.2012, 19:07	13
	Сегодня статистика БИГМИРА отличается от Декабря 2011, возможно они небесплатно пиарят ХРОМ. Хотя в мире и по сегодня лидер ИЕ. Но как бы там ни было... я считаю все должны иметь доступ к сайту. Даже 20% пользователей нельзя терять!!! http://www.artlebedev.ru/tools/browsers/ http://webrowser.ru/rynok/stat... -goda.html http://ukrainianiphone.com/02/04/2012/57275 http://top.bigmir.net/global/browser 0

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@and_y87
	20.08.2012, 17:29 #9
	Не по теме: RoooM, ИЕ6, 7, 8 - табун полудохлых хромых лошадей которых надо пристрелить... и забыть про них... Многие сайты готовы сделать всплывающее окошко глосящее: "Ваш браузер устарел! Для корректной работы сайта рекомендуем вам обновить ваш браузер" ИМХО: ИЕ6-8 слишком много внимания себе просят, и создают гемора 0

@RoooM 0 / 0 / 0 Регистрация: 16.08.2012 Сообщений: 7
	20.08.2012, 17:38	10
	Смотрите статистику! BIGMIR констатирует факт - 80% украинцев до сих пор сидит на ИЕ6 (возможно это старые компы, села, регионы) Тоесть на них можно просто забить? и послать их на всплывающее окошко? 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 97
	20.08.2012, 17:48	11
	RoooM, я суров, что поделать пускай обновляются... 0

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
	20.08.2012, 18:00 [ТС]	12
	Сообщение от RoooM 80% украинцев до сих пор сидит на ИЕ6 бред, этого быть неможет.... 0