时间戳

首页 > 解决方案 > 可以不使用绝对位置吗？

css - 可以不使用绝对位置吗？

问题描述

我想使用以下代码向按钮添加动画https://codepen.io/chrisota/pen/bNdRaM 但对其进行了一些更改

 a::before{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content:'';
    border-radius: 50%;
    display: block;
    width: 30px*2;
    height: 20px*2;
    line-height: 30px*2;
    left: -30px/2;
    text-align: center;
    transition: box-shadow 0.5s ease-out;
    z-index: -1;
}
  
 a:hover{
    color: #fff;}
  a:hover::before{
    box-shadow:inset 0 0 0 $width rgba($button-color,1);
    }

但是，据我所知绝对位置最好不要使用，但是当我删除它时，按钮消失了

<row>
<div class='col-5'>
a(href="http://www.dribbble.com/chrisota" title="Chris Ota Dribbble") <i class="fa fa-dribbble"></i> Dribbble
</div>
</row>

标签： css

解决方案

position: absolute正确使用时是一个很棒的工具。

它真正闪耀在伪元素中::before。::after

当您将元素的位置设置为和relative的位置时，您可以相对于元素本身定位伪元素。::before::afterabsolute

这使您可以做一些很酷的事情，例如向按钮添加图标。

只需确保设置display和content属性，如下所示。您可以添加top、right、bottom和left属性来移动元素。

.some-class {
    position: relative;
}
.some-class::before {
    position: absolute;
    display: block;
    content: '';
    top: 10px; /* just an example */
    left: 10px; /* just an example */
    width: 32px; /* just an example */
    height: 32px; /* just an example */
}

推荐阅读