如何将绝对定位的元素从其当前位置（而不是从父元素）偏移？

Question

如何将绝对定位的元素从其当前位置（而不是从父元素）偏移？

css

3

我不确定是脑子冻结还是缺乏知识。这应该是非常简单的，但我无法让它工作：

我有一个pseudo元素，我想要将其绝对定位（因此它被从流中取出并且不会扭曲其他元素）

并且

我希望伪元素与其当前位置偏移，例如仅向左偏移20像素。

我不能使用通过left: __px从父级进行典型定位偏移，因为它在不同屏幕尺寸上会导致问题。

请问有人能告诉我如何实现这一点吗？

非常感谢！

JSFIDDLE：https://jsfiddle.net/AlphaX/pcsa2ow6/

.x_cta_error_msg {
 line-height: 1.5; 
 background-color: lightgreen;
 padding: 10px 15px 10px 45px;
 height: 50px
}

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900; 
 content: "\f06a";
 font-size: 18px;
 position: absolute;
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
        </div>
        
        
<!-- just loading the fontawesome icon -->        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

- AlphaX

1

position:relative需要前往x_cta_error_msg，然后在图标上简单地使用left:Xpx。 - undefined

为什么？在设置父元素的position:relative时有什么问题吗？ - undefined

父元素=相对定位没有问题，但是你必须设置相对于父元素的伪距离（左侧），如果父元素根据屏幕大小扩展，则子元素将始终相对于父元素，而我希望子元素（伪元素）与div中的文本绑定。因此，使用下面的解决方案（transform），伪元素将始终相对于文本，而父元素可以随意扩展，因此在移动响应性方面更加稳健。 - undefined

1

你正在把一个简单的任务复杂化了，如果父元素扩展，那么里面的文本也会跟着扩展，因为它是其内容，而不是变换解决方案。而且这个解决方案并不稳健，因为它依赖于一个叫做“静态位置”的东西，根据每种情况可能表现不同。 - undefined

我曾经以为可能会有一个更简单的解决方案，但是我对这个问题没有找到。我已经修改了这个示例，以便你更好地理解：https://jsfiddle.net/AlphaX/pcsa2ow6/11/ 如果你扩大窗口宽度，你会看到图标与左边连接，而文本则离图标越来越远。 - undefined

显示剩余2条评论

2个回答

1

不要使用定位，依赖于常规流程：

.x_cta_error_msg {
  line-height: 1.5;
  background-color: lightgreen;
  padding: 10px 15px 10px 45px;
  height: 50px;
  text-indent:-20px; /* all what you need */
}

.x_cta_error_msg::before,
.x_simple_cta_error_msg::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06a";
  font-size: 18px;
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking
    Some text that will be here to s.

  </div>
</div>


<!-- just loading the fontawesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

- Temani Afif

这似乎确实更容易！然而，出于某种原因，在我的网站上它不起作用，但无论如何还是谢谢你！我会记住这个建议（只需删除所有定位）。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lakshya Thakur · Accepted Answer

您可以使用transform: translateX(-150%);将其向左移动，其中150%表示其自身宽度的150%。

.x_cta_error_msg {
 line-height: 1.5; 
 background-color: lightgreen;
 padding: 10px 15px 10px 45px;
 height: 50px
}

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900; 
 content: "\f06a";
 font-size: 18px;
 position: absolute;
 transform: translateX(-150%);
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
        </div>
        
        
<!-- just loading the fontawesome icon -->        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

虽然评论中提到position:relative结合left应该对您有效，但是这种方法可能不够稳定。