当父元素溢出时，CSS允许前/后元素超出div

Posted 2023-02-22

【中文标题】当父元素溢出时，CSS允许前/后元素超出div

【英文标题】：CSS allow before/after element out of div when parent element has overflow

【发布时间】：2022-01-17 02:08:31

【问题描述】：

我希望我的 before 或 after 元素显示在 div 之外。请注意，这个父 div 必须是具有自动溢出或滚动功能的滚动元素，但是 div 函数的输出将其禁用。

它应该看起来像在右侧，但带有滚动功能：

.container 
  display: flex;


.parent 
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;


.of 
  overflow: auto;


p 
  color: white;
  position: relative;


p::after 
  position: absolute;
  bottom: -8px;
  left: -16px;
  content: '';
  height: 2px;
  background: green;
  width: 2.313rem;

<div class="container">

  <div class="parent of">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

</div>

【问题讨论】：

我很困惑，你想让右侧镜像左侧吗？

如果这个父元素的溢出值为滚动或自动（可滚动），我希望我的前/后元素离开父元素。左边的部分只是为了表明溢出功能可以防止这种情况。右边应该代表它可以从父项中溢出而没有溢出

右侧图像上发生的事情是所有内容都溢出（包括文本 - 你只是看不到它，因为它是白色背景上的白色）。你能解释更多你真正想要什么吗？是所有的 p 元素都在溢出中还是只有绿线？

【参考方案1】：

要让parent divs 都可以滚动，您可以在父级上设置overflow: auto;。

我将您的 ::after 更改为 ::before，以便它与您的文本对齐，而不是在它旁边。然后你可以把你的绝对定位改为position: fixed;，让它看起来像右边，但仍然有滚动能力。

.container 
  display: flex;


.parent 
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  border-left: 20px solid #fff;
  padding-left: 20px;
  margin-left: -23px;
  background-clip: content-box;
  overflow-x: hidden;



p 
  color: white;
  position: relative;
  margin-left: -10px;
  background-clip: content-box;
  padding-left: 10px


p::after 
  position: absolute;
  content: '';
  height: 2px;
  background: green;
  width: 2.5rem;
  left: -1px;
  top: 1rem;

<div class="container">

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div

</div>

【讨论】：

也许绿线应该保持可滚动状态？

@Azu 从 OP 所说的来看 - “它应该看起来像在右侧，但具有滚动功能” 这不是他想要的结果。通过在父节点上设置 overflow: auto; 可以轻松获得该结果。

我希望绿线能够从 div 中窥视，我也希望它对文本具有“粘性”（所以也可以像 @Azu 所说的那样滚动）

@Kuqs 查看调整后的解决方案。

所以我已经为我的结果提供了解决方案，但是我问自己是否没有比填充/边距更简单的方法可以在每种情况下与父母和他们的孩子一起工作。我想知道为什么溢出属性限制了这个功能这么多

【参考方案2】：

我在css下面更改并添加了：

.parent 
   border-left: 20px solid #fff;
   padding-left: 20px;
   margin-left: -23px;
   background-clip: content-box;
   overflow-x: hidden;

p 
   margin-left: -20px;
   background-clip: content-box;
   padding-left: 20px

p::before 
   position: absolute;
   left: -0px;

最终代码：

.container 
  display: flex;


.parent 
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  overflow: scroll;
   border-left:20px solid #fff;
  padding-left:20px;
  margin-left:-23px;
    background-clip: content-box;
overflow-x:hidden;



p 
  color: white;
  position: relative;
  margin-left:-20px;
  background-clip: content-box;
  padding-left:20px


p::before 
  position:  absolute;
  content: '';
  height: 2px;
  background: green;
  width: 2.313rem;
  left:-0px;

<div class="container">

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p> <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p> <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

</div>

【讨论】：

这就是我正在寻找的结果，但是否可以在不移动文本的情况下这样做？

@Kuqs 如果我不移动文本，那么绿色条会显示在哪里？它将与左侧元素重叠。