CSS3列定位问题

2023年5月20日 238次阅读

我一直在玩
CSS3专栏,并遇到了定位问题.首先,看看我对jsfiddle：
http://jsfiddle.net/ahmednuaman/ybYtU/2/的测试

在div.cols中使用的是CSS3列,而另一个则不是.当您将鼠标悬停在第二个div中的链接上时,您会看到该链接的跨度相对于它显示,但是在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;
}

最佳答案 这里的问题是你如何使用’显示’和’位置’CSS属性,而不是列.

一般来说,如果你想使用position：absolute;作为一种相对于其父内联浮动内联的方法,您需要设置父位置：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>它应该从一开始就有标签！但请记住将它们添加到您自己的工作中！

点赞