相对父母，绝对的孩子

只是想知道是否有一个仅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>

问题是，.fadeIn元素现在没有非毒性子女，因此基本上它的高度为0，因为绝对元素不会在其父母的高处计算。

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

您可以处理很多方法，但是我为您做了这一点。我将以.fadeIn元素的position: static（默认位置值）的形式将您的span s的:first-child在CC_6元素内部进行。

另一种方法是为您设置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>

不要使所有元素均为 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>

相关内容

最新更新

热门标签：