::在选择器出现在图像容器顶部之前？答案

【问题标题】：::before selector coming on the top of the image container?::在选择器出现在图像容器顶部之前？
【发布时间】：2021-12-01 18:57:45
【问题描述】：

我正在尝试在图像后面嵌入图像容器的 ::before 选择器，但它是出现在图像的顶部，我想要 ::before 容器根据位置来我在编码中提到过

    **html**

       <div class='main'>
        <img src="imgg.png">
        </div>

  **css**

    .main{
      height:150px;
      width:150px;
      margin:0 auto;
      position:relative;
      margin-top:1rem;
      
    }
    img{
      width:100%;
      height:100%;
      background-size:cover;
      background-repeat:no-repeat;
      border-radius:50%;
      
    }
    .main::before{
      display:block;
      content:"";
      width:100%;
      height:100%;
      position:absoulte;
      top:-1rem;
      right:-1rem;
      background-color:red;
      border-radius:50%;
     
    }

【问题讨论】：

我不确定您要达到什么目的，如果要将 :before 放置在图像后面，您可以尝试将 z-index: -1 添加到您的 :before 中。但要尝试更准确的方法，我需要一个可重现的示例
当我在 img 上应用 positon:relative 时，它符合我的要求，但逻辑不清楚我在这里的相对工作方式......
我已经在我的回答中解释了原因，请同时删除你的css中的重复代码（位置和上/左都是重复的，所以只考虑最新的值）

标签： javascript html css css-selectors

【解决方案1】：

position: absolute 属性根据最近的定位祖先对齐 DOM 元素（定位 = 不使用默认位置属性）。

这就是当您将position: relative 设置为img 标记时代码有效的原因。没有它，它会进一步查找 DOM 树，如果它没有找到任何定位的元素，它将相对于浏览器窗口对齐对象。

这里你可以找到更多关于定位布局的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/position

【讨论】：