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

这里的问题是你如何使用'display'和'position'CSS属性，而不是列。

一般来说，如果您想使用position:absolute;作为相对于其父级内联的内联方式，则需要让父position:relative;为绝对定位项提供一个引用点。从中计算出它的位置。 w3schools CSS positioning reference

所以在你的情况下，在一个锚内有一个span，你希望锚链接是position：relative;和位置：绝对;因此，跨度的坐标是相对于锚标记（顶部或底部以及左或右属性）。

最后一个'陷阱'是被包裹的锚。在我的屏幕上，您的长锚文本有时会包裹在一条线上。所以现在问题取决于您的具体用例。您可以将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>标记。但请记住将它们添加到您自己的工作中！

CSS3列定位问题

1 个答案: