относительный родитель, абсолютный ребенок - PullRequest
Новая
       57

относительный родитель, абсолютный ребенок

0 голосов
/ 15 февраля 2019

просто интересно, есть ли решение / трюк только 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>

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Проблема в том, что .fadeIn элемент теперь не имеет неабсолютных дочерних элементов, поэтому в основном он имеет высоту 0, поскольку абсолютные элементы не вычисляются по высоте их родителя.

Таким образом,единственное, что вам нужно сделать, это дать правильный height элементу .fadeIn.

Есть много способов справиться с этим, но я сделал это для вас.Я собираюсь сделать :first-child из ваших span s внутри .fadeIn элемента как 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>
0 голосов
/ 15 февраля 2019

Не делайте все элементы равными 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>
...