css 如何从当前位置(而不是从父元素)定位(偏移)绝对元素？

46qrfjad 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(152)

我不确定我是不是大脑冻结了还是缺乏知识。这应该是超级直接的，但我不能让它工作：*

我有一个pseudo元素，我希望它是positioned absolute（这样它就从流中取出，并且不会扭曲其他元素）
和
我希望伪元素是从它的当前位置偏移，例如从它现在的位置向左偏移20 px。
我不能通过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" />

css

来源：https://stackoverflow.com/questions/66410119/how-to-position-offset-absolute-element-from-its-current-position-not-from-pa

2条答案

按热度按时间

fzsnzjdm1#

您可以使用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沿着工作，如注解中所述。

赞(0）回复(0）举报 2023-04-13

rqmkfv5c2#

完全不使用定位，依靠正常流量：

.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" />

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何从当前位置(而不是从父元素)定位(偏移)绝对元素？

2条答案

相关问题

热门标签

最新问答