相对父母，绝对孩子

【问题标题】：relative parent, absolute child相对父母，绝对孩子
【发布时间】：2019-02-15 18:44:05
【问题描述】：

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

我已经了解到绝对位置会从布局中取出元素，因此不可能为父元素提供其绝对子元素的高度。 也许你们知道解决方法。

感谢您的时间和想法

/*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>

【问题讨论】：

    标签： css css-position absolute overlapping


    【解决方案1】：

    问题是，.fadeIn 元素现在没有非绝对子元素，所以基本上它的高度为 0，因为绝对元素不会在其父元素的高度中计算。

    因此，您唯一需要做的就是将正确的 height 赋予 .fadeIn 元素。

    有很多方法可以解决这个问题，但我为你做了一个。我将在.fadeIn 元素内将:first-child 的spans 设置为position: static（默认位置值），让其父级知道它应该花费多少height。

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

    另一种方法（正如你已经提到的）是让另一个孩子（在你的例子中，一个 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>

    【讨论】：

      【解决方案2】：

      不要将所有元素都设为absolute。保留一个relative（或static），以便分配所需的空间：

      /*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>

      【讨论】：

        猜你喜欢
        • 2021-12-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-01-12
        • 2017-01-11
        • 1970-01-01
        • 2019-06-20
        • 2015-01-14
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode