CSS3 позиционирования колонки проблема

Question

Я играл с колонками CSS3 и столкнулся с проблемой позиционирования.Во-первых, проверьте мой тест на jsfiddle: http://jsfiddle.net/ahmednuaman/ybYtU/2/

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

Это стандартная ошибка?Есть ли обходной путь?

Пример разметки:

<div class="cols">
    Pork loin ball tip short ribs pork belly t-bone, short loin meatball kielbasa beef ribs tri-tip biltong beef ground round. Pork chop brisket jerky meatloaf. Strip steak short ribs tri-tip short loin pork loin. Turkey pastrami frankfurter, jerky hamburger short loin swine beef bacon chuck ham kielbasa biltong. Swine pork loin turkey hamburger filet mignon chuck, rump pig meatloaf bresaola prosciutto venison salami. Shoulder tongue short ribs, spare ribs salami filet mignon tri-tip tenderloin andouille capicola fatback pork chop sirloin. Ham leberkäse tri-tip, strip steak cow chuck ball tip fatback pork belly.

    Boudin bacon rump sausage pork belly, fatback sirloin kielbasa filet mignon. T-bone drumstick shoulder, filet mignon short ribs sausage pancetta cow kielbasa pig hamburger biltong meatball boudin beef. Meatball pig tri-tip hamburger, beef shankle brisket jerky pork loin rump turducken chuck. Fatback pork loin drumstick pork kielbasa, filet mignon prosciutto tri-tip sausage shoulder. Turkey biltong salami sirloin. Pork chop t-bone tri-tip, rump jerky corned beef tail. Ball tip fatback biltong pig, leberkäse frankfurter pork belly drumstick hamburger. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>

    Jerky chuck cow tri-tip. Jerky ham beef ribs, turducken short ribs meatball salami jowl shoulder sausage short loin. Meatball kielbasa pancetta sausage, jerky flank beef pork tri-tip ball tip prosciutto. Frankfurter beef capicola turkey. Swine short ribs kielbasa, ball tip fatback meatloaf chicken shank ham hock tenderloin beef ribs turkey shoulder tri-tip. Flank strip steak turducken, venison meatball fatback jerky frankfurter ribeye short loin turkey pancetta ham hock t-bone. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>
</div>

<div>

    Boudin bacon rump sausage pork belly, fatback sirloin kielbasa filet mignon. T-bone drumstick shoulder, filet mignon short ribs sausage pancetta cow kielbasa pig hamburger biltong meatball boudin beef. Meatball pig tri-tip hamburger, beef shankle brisket jerky pork loin rump turducken chuck. Fatback pork loin drumstick pork kielbasa, filet mignon prosciutto tri-tip sausage shoulder. Turkey biltong salami sirloin. Pork chop t-bone tri-tip, rump jerky corned beef tail. Ball tip fatback biltong pig, leberkäse frankfurter pork belly drumstick hamburger. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>

    Jerky chuck cow tri-tip. Jerky ham beef ribs, turducken short ribs meatball salami jowl shoulder sausage short loin. Meatball kielbasa pancetta sausage, jerky flank beef pork tri-tip ball tip prosciutto. Frankfurter beef capicola turkey. Swine short ribs kielbasa, ball tip fatback meatloaf chicken shank ham hock tenderloin beef ribs turkey shoulder tri-tip. Flank strip steak turducken, venison meatball fatback jerky frankfurter ribeye short loin turkey pancetta ham hock t-bone. Salami turkey jerky capicola. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>
</div>

Пример CSS:

div
{
    position: relative;
    margin: 0 0 20px 0;
}
div.cols
{
    -moz-column-count:2;-moz-column-gap:20px;-webkit-column-count:2;-webkit-column-gap:20px;column-count:2;column-gap:20px;
}
a span
{
   position: absolute;
   display: block;
   visibility: hidden;
   background: red;
}
a:hover span
{
    visibility: visible;
}

Answer 1

Проблема здесь в том, как использовать атрибуты CSS «display» и «position», а не столбцы.

Вообще говоря, если вы хотите использовать position:absolute; как способ размещения чего-либо встроенного относительно его родителя, вам нужно сделать родителя position:relative;, чтобы дать элементу с абсолютным позиционированием точку отсчета, чтобы вычислить его позицию из , w3schools Справочник по позиционированию CSS

Таким образом, в вашем случае с промежутком внутри якоря вы хотите, чтобы якорная ссылка была position: относительной; и промежуток, чтобы быть положением: абсолютный; так, чтобы координаты промежутка относились к тегу привязки (атрибуты top или bottom & left или right).

Одна последняя «гоча» - это якоря, которые были завернуты. На моем экране ваш длинный якорный текст иногда перебирался через строки. Так что теперь вопрос становится зависимым от вашего конкретного варианта использования. Вы можете добавить white-space: nowrap; к CSS привязки, чтобы предотвратить перенос, или удачно расположить область всплывающей подсказки относительно всей привязанной привязки. Это просто предпочтение для вашего приложения.

Итак, мое решение вашей проблемы заключается в следующем CSS:

/* Your original CSS */
div
{
    position: relative;
    margin: 0 0 20px 0;
}
div.cols
{
    -moz-column-count:2;-moz-column-gap:20px;-webkit-column-count:2;-webkit-column-gap:20px;column-count:2;column-gap:20px;
}

/* My updated CSS */
a {
    position: relative;
    /*white-space: nowrap;*/  //Optional
}
a span
{
    position:absolute;
    visibility: hidden;
    height:20px;top:-20px;
    right:0;
    z-index:100;
    background: red;
}
a:hover span
{
    visibility: visible;
}

Теперь вы можете настроить верхний / правый атрибут для диапазона или заменить его нижним / левым или любым другим, чтобы получить его в нужной позиции. Также в этом примере мы использовали очень простой CSS с необработанными именами тегов, я бы рекомендовал создать класс ссылок для этих специальных якорей, чтобы он не распространялся на всю страницу произвольно. Что-то вроде a.MyHoverLinkClass { ... }.

Если вы чувствуете, что я что-то упустил из вашей проблемы, пожалуйста, оставьте комментарий, чтобы прояснить вашу проблему, чтобы я мог ее решить.

ОБНОВЛЕНИЕ: Если вы используете столбцы в Firefox, это подразумевает абзацы вокруг текста. Но и Chrome, и Safari требуют, чтобы вы добавили <p></p> в свои столбцы, чтобы этот пример работал! Вот почему некоторые разработчики сказали, что мой пример сработал, а другие - нет. Я исправил разметку в моем jsfiddle, добавив теги <p></p>, как и должно быть с самого начала! Но не забудьте добавить их в свою работу!