使用CSS flexbox重叠两个居中的元素 [英] Overlap two centered elements using CSS flexbox

问题描述

我试图把两个元素放在页面中间，一个在另一个之后。目的是要有一个完全响应的页面，中间有一个循环的圆圈。

下面是下面的小提琴 ：

class =snippet-code-css lang-css prettyprint-override> html，body {height：100％;宽度：100％;} body {background：lightblue;显示：flex; align-items：center; justify-content：center;}。container {display：flex; align-items：center; justify-content：center;}。sphere {display：flex;背景：黑色; border-radius：300px; height：100px; width：100px;}。container：after {display：flex;背景：#FFF; border-radius：300px;身高：130px;宽度：130px;动画：搏动2.5s缓解; animation-iteration-count：infinite;不透明度：0.0;内容：; z-index：-1; margin：auto;} @ keyframes pulsate {0％{transform：scale（0.1，0.1）;不透明度：0.0; } 50％{不透明度：1.0; } 100％{transform：scale（1.2，1.2）;不透明度：0.0; }

< div class =container> < div class =sphere>< / div>< / div>

方法：

目前我正在使用flexbox将一个容器div放在一个圆圈内，而：after在容器上创建脉冲标记。我试过使用z-indexing（似乎没有做任何事情）和绝对定位（这需要硬编码px值，我想远离）。

有没有一个优雅的方式来实现这个使用flexbox？

所需的效果：

<一个href =http://jsfiddle.net/Fy8vD/2004/ =noreferrer>这个很接近，但是我不想使用px值作为：在元素之后，如果可能的话。

解决方案

可以简单地添加到你的：

  position：absolute; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
  

小提琴： http://jsfiddle.net/ccyd6xh1/

更新这是一个快速的草稿，并不是绝对的响应。如果你想要的效果真的跟随你的球体和它的大小，你应该添加：在球体元素，而不是它的容器，并使用％宽度和高度（这里发光量增长到 130％的球体大小）：

http://jsfiddle.net/tjoo739y/

I'm trying to absolutely center two elements in the middle of the page, with one behind the other. The intent is to have a page that is fully responsive with a circle in the middle which has a pulse effect behind it.

Here is a fiddle of the below:

html,
body {
  height: 100%;
  width: 100%;
}
body {
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sphere {
  display: flex;
  background: black;
  border-radius: 300px;
  height: 100px;
  width: 100px;
}
.container:after {
  display: flex;
  background: #FFF;
  border-radius: 300px;
  height: 130px;
  width: 130px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0;
  content: "";
  z-index: -1;
  margin: auto;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

<div class="container">
  <div class="sphere"></div>
</div>

Method:

I'm currently using flexbox to center a container div with a circle inside, and an :after tag on the container to create the pulse. I've tried using z-indexing (doesn't seem to do anything), and absolute positioning (which requires hard-coded px values which I'd like to stay away from).

Is there a graceful way to achieve this using flexbox?

Desired Effect:

This is close, but I'd like to move away from using px values for the :after element if possible.

解决方案

Not sure if that'll do it, but you could simply add to your :after

position: absolute;
top   : 0;
left  : 0;
bottom: 0;
right : 0;

fiddle: http://jsfiddle.net/ccyd6xh1/

Update that was a quick draft, and was not absolutely responsive. If you want the effect the really follow your sphere and its size, you should add the :after on the sphere element and not its container, and use % width and height (here the glow grows to 130% of the sphere size):

http://jsfiddle.net/tjoo739y/

这篇关于使用CSS flexbox重叠两个居中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！