Jump to content
  • 0

div relative и static одновременно

Diver2

Asked by Diver2,

 Share

Question

Diver2 Explorer

Diver2

Posted
Posted (edited)

Добрый день,

Есть два слоя, ширина 100%, следующие друг за другом.

<div>(1) static, высота не известна заранее, т.к. определяется контентом, который вставляет php</div>

<div>(2) relative, т.к. внутри используется div с абсолютным позиционированием</div>

Чтобы внутри второго слоя (2) работало абсолютно позиционирование, я ставлю ему relative. Но тогда он не учитывает, что перед ним есть другой слой (1) и слои накладываются, (2) поверх (1).

Вопрос: как сделать так, чтобы внутри второго слоя работало абсолютно позиционирование, но он располагался строго под первым?

Заранее спасибо)

UPD: Чуть ниже разместил наглядную картинку "что сейчас и что не так"

Edited by Diver2
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Diver2 Explorer

Diver2

Posted
  • Author
Posted (edited)
  Vlad said:
Может поиграть z-index?

Vlad

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

Вот для наглядности:

0_40f5a_3da68e75_L.jpg

rus

Т.е. поставить у первого слоя float: left и далее <br style="clear: left" /> ?

И он сработает несмотря на то, что первый слой обычный, а второй - relative?

Спрашиваю, т.к. у меня уже не сработало, может я что не так делаю?

Edited by Diver2
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted (edited)
  Diver2 said:
rus

Т.е. поставить у первого слоя float: left и далее <br style="clear: left" /> ?

И он сработает несмотря на то, что первый слой обычный, а второй - relative?

Спрашиваю, т.к. у меня уже не сработало, может я что не так делаю?

эмм..., не совсем так. флоат поставить у обоих можно лефт и у первого клир сделать, хотя и без него проверял - работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height:100%;
width:100%;
}
* {
margin:0;
padding:0;
}
.one {
width:100%;
height:auto;
background:#FFACAA;
float:left;
margin-bottom:10px;
clear:both;
}
.two {
width:100%;
height:auto;
background:#BFF08E;
float:left;
position:relative;
}
</style>
</head>
<body>
<div class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="two">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</body>
</html>

Edited by rus
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
  Quote
Но тогда он не учитывает, что перед ним есть другой слой (1) и слои накладываются, (2) поверх (1)

Вообще-то relative сам должен двигаться куда надо. Проблема, случаем, происходит не в IE при динамической смене контента верхнего дива?

Link to comment
Share on other sites
  • 0
Diver2 Explorer

Diver2

Posted
  • Author
Posted (edited)

rus

Спасибо вам огромное за помощь, все работает теперь как надо. Правда суть решения, т.е. почему оно работает, я так и не понял)

SelenIT

Разве должен? Он позиционируется относительно родителя ведь по идее, а не относительно других элементов в родителе. Подчеркиваю сразу, что не попытка спорить, а диалог)

И нет, не работало даже в FF.

P.S. Оффтоп

Я много раз слышал, что в IE можно включить что-то вроде имитации более старых версий. Т.е. увидеть, как бы отобразил страницу IE 6, при том что на самом деле стоит IE 8 например. Правда ли это и если да, не кинете ссылку, как делается? Я пробовал со своей семерки (вин) снести восьмой IE, но он не хочет полностью удаляться и IE6 сверху отказывается ставиться.

Edited by Diver2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Diver2, position:relative отсчитывается от того места, где элемент стоял бы, имея position:static. Только "включает" z-index, плюс в IE иногда возникают проблемы вроде сабжевой при динамической перерисовке (возможно, еще при "дорастяжении" блоков по загрузке картинок и т.п.), часто лечится hasLayout-ом (а float, кроме прочего, как раз его включает). Но в FF я таких проблем не припоминаю. Можно увидеть пример? Отрицательных маргинов там случаем не было?

Link to comment
Share on other sites
  • 0
Diver2 Explorer

Diver2

Posted
  • Author
Posted (edited)

npofonr

IeTester — супер вещь, спасибо)

Выявмл у себя список глюков в семерке и шестерке... ненавижу ие (

SelenIT

http://diveservice.onestar.ru/catalogue/product/221

Под заголовком "Буксируемый металлоискатель PULSE 12 Производитель: JW Fishers"

Навигация со стрелками - это слой 1, то, что ниже - это слой 2. У слоя 2 обязательно relative, т.к. белые обводки со скругленными краями создаются через кучу абсолютно спозиционированных слоев, исходная картинка там квадратная.

Внепазно обнаружил, что в IE 7 индивидуально не работает float: left у навигации, она не делает перенос строки, а выстраивает все в строчку, обрезая лишнее... надо будет видимо новый топик открывать)

-

Всем спасибо еще раз огромное за помощь

-

Edited by Diver2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

"То, что ниже" — это пустой абзац с двумя <br>-ками? Он не проваливается под <div> с "хлебными крошками", потому что у того стоит float и тот див "вплывает" в этот абзац. Достаточно поставить этому абзацу clear: left, и наезжать перестанет.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept