css - 相对 parent ，绝对 child

标签 css css-position absolute overlapping

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

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

感谢您的时间和想法

/*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，因为绝对元素不会根据其父元素的高度进行计算。

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

有很多方法可以解决这个问题，但我为您制作了这个。我要使 .fadeIn 元素内的 span 的 :first-child 为 position: static(默认位置值)让其父知道它应该占用多少高度。

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

关于css - 相对 parent ，绝对 child ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54707160/

上一篇：html - 绝对定位输入的宽度不符合 CSS 规则

下一篇：javascript - 具有 "this"变量的抽象

相关文章：

html - CSS z-index 不工作(绝对位置)

css - 如何定位来自 SVG 的 <use> 的 SVG 图像

CSS - 绝对位置和文档流

css - 当内部 div 位置改变时调整容器 div 的大小

html - 绝对位置在滚动条上没有固定位置

CSS - 将图像相对/绝对放置在彼此之上

html - 在 Bootstrap 中更改字形图标的背景颜色

css - Bourbon 整洁和语义化的 HTML5，BEM 呢？

html - css - 在悬停时在图像上做动画

css - 使用 css 检查单选按钮时影响 div

©2024 IT工具网  联系我们