相对 parent、绝对 child

Question

只是想知道是否有 css 唯一的解决方案/技巧来避免绝对元素与下面的内容重叠。

我已经了解到绝对位置会从布局中删除元素，因此无法为 parent 元素提供其绝对 child 的高度。也许你们知道解决方法。

感谢您的时间和想法

/*Sentence*/
.sentence{
     color: #222;
     font-size: 50px;

}

/*FadeIn*/
.fadeIn{
 display: inline;
 text-indent: 8px;
}
.fadeIn span{
 animation: fadeEffect 12.5s linear infinite 0s;
 -ms-animation: fadeEffect 12.5s linear infinite 0s;
 -webkit-animation: fadeEffect 12.5s linear infinite 0s;
 color: #00abe9;
 opacity: 0;
 overflow: hidden;
 position: absolute;
}
.fadeIn span:nth-child(2){
 animation-delay: 2.5s;
 -ms-animation-delay: 2.5s;
 -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
 animation-delay: 5s;
 -ms-animation-delay: 5s;
 -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
 animation-delay: 7.5s;
 -ms-animation-delay: 7.5s;
 -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
 animation-delay: 10s;
 -ms-animation-delay: 10s;
 -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -moz-transform: translateY(0px); }
 10% { opacity: 1; -moz-transform: translateY(0px); }
 25% { opacity: 1; -moz-transform: translateY(0px); }
 30% { opacity: 0; -moz-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -webkit-transform: translateY(0px); }
 10% { opacity: 1; -webkit-transform: translateY(0px); }
 25% { opacity: 1; -webkit-transform: translateY(0px); }
 30% { opacity: 0; -webkit-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -ms-transform: translateY(0px); }
 10% { opacity: 1; -ms-transform: translateY(0px); }
 25% { opacity: 1; -ms-transform: translateY(0px); }
 30% { opacity: 0; -ms-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}

<body>
  
  
  <h2 class="sentence">
    <div class="fadeIn">
      <span>Handsome.</span>
      <span>Clean.</span>
      <span>Elegant.</span>
      <span>Magnificent.</span>
      <span>Adorable.</span>
    </div>
  </h2>
  <h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
 

</body>

只要我添加一个字母，它就会起作用。那么也许添加伪元素是一种解决方案？

/*Sentence*/
.sentence{
     color: #222;
     font-size: 50px;

}

/*FadeIn*/
.fadeIn{
 display: inline;
 text-indent: 8px;
}
.fadeIn span{
 animation: fadeEffect 12.5s linear infinite 0s;
 -ms-animation: fadeEffect 12.5s linear infinite 0s;
 -webkit-animation: fadeEffect 12.5s linear infinite 0s;
 color: #00abe9;
 opacity: 0;
 overflow: hidden;
 position: absolute;
}
.fadeIn span:nth-child(2){
 animation-delay: 2.5s;
 -ms-animation-delay: 2.5s;
 -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
 animation-delay: 5s;
 -ms-animation-delay: 5s;
 -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
 animation-delay: 7.5s;
 -ms-animation-delay: 7.5s;
 -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
 animation-delay: 10s;
 -ms-animation-delay: 10s;
 -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -moz-transform: translateY(0px); }
 10% { opacity: 1; -moz-transform: translateY(0px); }
 25% { opacity: 1; -moz-transform: translateY(0px); }
 30% { opacity: 0; -moz-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -webkit-transform: translateY(0px); }
 10% { opacity: 1; -webkit-transform: translateY(0px); }
 25% { opacity: 1; -webkit-transform: translateY(0px); }
 30% { opacity: 0; -webkit-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -ms-transform: translateY(0px); }
 10% { opacity: 1; -ms-transform: translateY(0px); }
 25% { opacity: 1; -ms-transform: translateY(0px); }
 30% { opacity: 0; -ms-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}

<body>
  
  
  <h2 class="sentence">A
    <div class="fadeIn">
      <span>Handsome.</span>
      <span>Clean.</span>
      <span>Elegant.</span>
      <span>Magnificent.</span>
      <span>Adorable.</span>
    </div>
  </h2>
  <h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
 

</body>

Answer 1

不要让所有元素都成为absolute。保留一个 relative（或 static）以便分配所需的 space:

/*Sentence*/

.sentence {
  color: #222;
  font-size: 50px;
}


/*FadeIn*/

.fadeIn {
  display: inline;
  text-indent: 8px;
  position: relative;/*added*/
}

.fadeIn span {
  animation: fadeEffect 12.5s linear infinite 0s;
  color: #00abe9;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  left: 0; /*added*/
  top: 0; /*added*/
}


/*added this*/
.fadeIn span:first-child {
  position: relative;
}
/**/

.fadeIn span:nth-child(2) {
  animation-delay: 2.5s;
}

.fadeIn span:nth-child(3) {
  animation-delay: 5s;
}

.fadeIn span:nth-child(4) {
  animation-delay: 7.5s;
}

.fadeIn span:nth-child(5) {
  animation-delay: 10s;
}


/*FadeIn Animation*/

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    transform: translateY(0px);
  }
  10% {
    opacity: 1;
    transform: translateY(0px);
  }
  25% {
    opacity: 1;
    transform: translateY(0px);
  }
  30% {
    opacity: 0;
    transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<h2 class="sentence">
  <div class="fadeIn">
    <span>Handsome.</span>
    <span>Clean.</span>
    <span>Elegant.</span>
    <span>Magnificent.</span>
    <span>Adorable.</span>
  </div>
</h2>
<h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>

Answer 2

问题是，.fadeIn 元素现在没有 non-absolute children，所以基本上它的高度为 0，因为绝对元素不会在高度中计算他们的 parent.

因此，您唯一需要做的就是为 .fadeIn 元素提供适当的 height。

有很多方法可以解决这个问题，但我为您准备了这个。我打算将 span 元素内的 span 设为 position: static（默认位置值），让其 parent 知道有多少 height 是否需要。

另一种方法是为您的 .fadeIn 元素设置 height: 50px（例如），让该元素知道它的高度应该是多少。

另一种方法（正如您已经提到的）是制作另一个 child（在您的示例中，一个 A）让它知道高度值。

还有更多方法。

但我采用了第一个解决方案（根据该上下文进行了一些其他更改以确保一切正常工作）。看下面的代码：

/*Sentence*/
.sentence{
  color: #222;
  font-size: 50px;
}

.fadeIn { position: relative; }

.fadeIn span{
 animation: fadeEffect 12.5s linear infinite 0s;
 -ms-animation: fadeEffect 12.5s linear infinite 0s;
 -webkit-animation: fadeEffect 12.5s linear infinite 0s;
 color: #00abe9;
 opacity: 0;
  top: 0;
 overflow: hidden;
 position: absolute;
}
.fadeIn span:first-child { position: static; display: block }
.fadeIn span:nth-child(2){
 animation-delay: 2.5s;
 -ms-animation-delay: 2.5s;
 -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
 animation-delay: 5s;
 -ms-animation-delay: 5s;
 -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
 animation-delay: 7.5s;
 -ms-animation-delay: 7.5s;
 -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
 animation-delay: 10s;
 -ms-animation-delay: 10s;
 -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -moz-transform: translateY(0px); }
 10% { opacity: 1; -moz-transform: translateY(0px); }
 25% { opacity: 1; -moz-transform: translateY(0px); }
 30% { opacity: 0; -moz-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -webkit-transform: translateY(0px); }
 10% { opacity: 1; -webkit-transform: translateY(0px); }
 25% { opacity: 1; -webkit-transform: translateY(0px); }
 30% { opacity: 0; -webkit-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; -ms-transform: translateY(0px); }
 10% { opacity: 1; -ms-transform: translateY(0px); }
 25% { opacity: 1; -ms-transform: translateY(0px); }
 30% { opacity: 0; -ms-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}

<body>
  
  
  <h2 class="sentence">
    <div class="fadeIn">
      <span>Handsome.</span>
      <span>Clean.</span>
      <span>Elegant.</span>
      <span>Magnificent.</span>
      <span>Adorable.</span>
    </div>
  </h2>
  <h2>LOrem iaoeg egaa eg aeg aeg aegoaegaokeg aeogk aeogkae gok </h2>
 

</body>

相对 parent、绝对 child

relative parent, absolute child

css

css-position

absolute

overlapping