html - 位置 : absolute styling only works if I use pos: absolute

Question

我对此很困惑，你可以看到它适用于 pos: absolute; 但不适用于 position: absolute;

这是什么意思？

https://jsfiddle.net/aasr169k/

#about {
    background-color: #FFF0F4;
    padding: 200px 100px;

    .chair-drawing-container {
        border: 4px solid rgba(255,255,255,1);
        height: 400px;
        text-align: center;

        [href*="localhost"] {
            position: relative;

            &:before {
                pos: absolute;
                right: 100%;
                top: 25%;
                width: 80%;
                height: 30%;
                border-left: solid rgba(50,50,50,1) 8px;
                border-right: solid rgba(50,50,50,1) 8px;
                content: "";
                display: inline-block;
            }
        }
    }
}

<section id="about">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-8 chair-drawing-container">
                <a href="localhost"></a>
            </div>
        </div>
    </div>
</section>

Answer 1

其实是你的pos: absolute;不起作用，那么如果您尝试使用 position: absolute;设计有变化，才是真正的效果position: absolute;到你的设计。尝试删除 pos: absolute;再次运行，你会看到，情况是一样的，这意味着你的位置没有设置为绝对位置。