css position в absolute

gradus · July 31, 2011

Есть див определённой высотой и шириной, в нём куча картинок со скролом за счёт overflow-y.

Каждая картинка в диве, а на картинке, но в этом же диве див-меню (position: relative;) в этом меню длинные ссылки (с position:absolute)

Проблема в том что очень длинные ссылки из за того что их родитель с position: relative; сжимаются и вместо того что бы показываться над окном они пропадают под ним, если же мы меняем местами position, то казалось бы всё нормально НО так как у нас есть скрол и при его прокрутке ссылки не остаются на картинке , а остаются на месте а должны быть привязаны к местоположению картинки.

вот http://bm61.16mb.com/test/index.htm ужас этот

заменив position вот такой http://bm61.16mb.com/test/index2.htm ужас

<html><head><title>титл</title>
<style>
.text-field {
        padding: 15px;
        float:left;
overflow-y: auto;
 overflow-x: hidden;
 height:600px; 
width:400px;
}
.tooltip {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px 5px 0;
}
.prev_menu {
  position: relative;
  height: auto;
  padding: 3px;
}
.manua{
position: absolute;
}
</style>
</head>
<body>
<div class="text-field">
<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>
		<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>
		<div class="tooltip">
          <div class="prev_menu">
<div class="manua">
              <a href="" target="_blank">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</a>
</div>
        </div>
<img src="http://bm61.16mb.com/test/files/tumblr_kyjc25RIls1qb0c40.jpg" />
        </div>

</div>
</body></html>

Edited July 31, 2011 by gradus

jumancy · August 1, 2011

во втором примере(http://bm61.16mb.com/test/index2.htm) что не устраивает?

gradus · August 1, 2011

во втором примере(http://bm61.16mb.com/test/index2.htm) что не устраивает?

посмотри на самые крайние справа ссылки, они скрываются под окном, а надо что бы были над окном

spdif · August 1, 2011

... самые крайние справа ссылки, они скрываются под окном, а надо что бы были над окном

каким окном, про какое окно вы говорите?

gradus · August 1, 2011

... самые крайние справа ссылки, они скрываются под окном, а надо что бы были над окном
каким окном, про какое окно вы говорите?

ну всмысле родительский див text-field

jumancy · August 2, 2011

во втором примере(http://bm61.16mb.com/test/index2.htm) что не устраивает?
посмотри на самые крайние справа ссылки, они скрываются под окном, а надо что бы были над окном

чтобы было над окном, к ссылку пропиши z-index: 2, а тому окну z-index: 1

gradus · August 4, 2011

не работает ну или не правильно сделал

http://bm61.16mb.com/test/index2.htm

jumancy · August 5, 2011

Добавте блоку <div class="prev_menu"> z-index: 900;

gradus · August 5, 2011

тоже самое

Non Stop · August 7, 2011

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

gradus · August 10, 2011

Non Stop, спасибо КЭП.А по теме есть варианты ?

Non Stop · August 10, 2011

Попробуй


.tooltip {
position: relative;
}

В http://bm61.16mb.com/test/index.htm

SelenIT · August 10, 2011

Похоже, вариантов особо и нет. Абсолютно позиционированные потомки не обрезаются overflow:hidden, но и не привязываются к контенту, относительно позиционированные — привязываются, но обрезаются, единственный способ привязать абсолютных — дать им относительного родителя, отчего они вместе с ним тоже начинают обрезаться.

А заставить длинные строки переноситься (word-wrap) или, например, прокручиваться при наведении, как названия песен в Винампе — дизайн никак не позволяет?

psywalker · August 10, 2011

Похоже, вариантов особо и нет. Абсолютно позиционированные потомки не обрезаются overflow:hidden, но и не привязываются к контенту

Хм...как это не обрезаются? Не мог бы ты привести пример того, что ты имеешь ввиду? :rolleyes:

gradus · August 10, 2011

А заставить длинные строки переноситься (word-wrap) или, например, прокручиваться при наведении, как названия песен в Винампе — дизайн никак не позволяет?

переводить точно нет, прокручиваться это долго

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

psywalker · August 10, 2011

А заставить длинные строки переноситься (word-wrap) или, например, прокручиваться при наведении, как названия песен в Винампе — дизайн никак не позволяет?
переводить точно нет, прокручиваться это долго
Я вот думаю может, при наведении подсказку показывать где будет полная ссылка и подсказка будет уходить влево если ссылка находится близко справа и наоборот.Не помните какое для этого надо свойство применить ?

position: absolute;

SelenIT · August 10, 2011

Хм...как это не обрезаются? Не мог бы ты привести пример того, что ты имеешь ввиду?

Как-то так. Я сам был сильно удивлен, впервые узнав об этой особенности (в одном из холиворов про overflow vs. clearfix).

psywalker · August 10, 2011

Хм...как это не обрезаются? Не мог бы ты привести пример того, что ты имеешь ввиду?
Как-то так. Я сам был сильно удивлен, впервые узнав об этой особенности (в одном из холиворов про overflow vs. clearfix).

Погоди, а что тут особенного? В чём прикол?

Просто ведь можно поставить релатив контейнеру и трабл решается?

http://jsfiddle.net/mMTCq/1/

Softlink · August 10, 2011

Интересное кино. Если родителю не задавать позиционирование, то блок не обрезается, если задать, то обрезается.

Однако, это правило не работает для body. Т.е. там хоть задавай позиционирование, хоть не задавай, overflow:hidden все равно обрежет абсолютный блок.

SelenIT · August 10, 2011

В чём прикол?

Меня удивило, что при overflow:hidden у родителя в принципе возможна ситуация, когда потомки не обрезаются

можно поставить релатив контейнеру и трабл решается?

Насколько я понял сабжевую задачу, тут требовалось как раз наоборот — чтобы строка не обрезалась, но скроллилась вместе с содержимым...

psywalker · August 10, 2011

В чём прикол?
Меня удивило, что при overflow:hidden у родителя в принципе возможна ситуация, когда потомки не обрезаются

Хм...да, интересненько :unsure: А как это можно объяснить с точки зрения спеки?

SelenIT · August 11, 2011

А как это можно объяснить с точки зрения спеки?

Насколько я понимаю: в определении overflow (п. 11.1.1 спеки) явно указано исключение:

Это свойство указывает, будет ли содежимое элемента-контейнера блоков обрезаться, если оно переполняет бокс элемента. Оно влияет на обрезку всего содержимого элемента кроме потомков (и, соответственно, их потомков и содержимого), чей "containing block" является областью просмотра или предком элемента.

А этот самый "containing block" (к сожалению, не знаю устоявшегося русского перевода этого термина) для абсолютно позиционированных элементов определен в п. 10.1 спеки так:

4. Если элементу задан 'position:absolute', его "containing block" создается ближайшим предком, у которого стоит 'position: absolute', 'relative' или 'fixed'... Если такого предка нет, "containing block"-ом является начальный "containing block" (для экранных браузеров это область просмотра, для постраничной печати — область страницы).

Выходит, с точки зрения спеки всё правильно, но интуиция тут нервно курит...

psywalker · August 11, 2011

SelenIT, Понял дружище, спасибо за объяснение, правда, интересная песня

Sign In

css position в absolute

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information