将div定位在使用flex CSS属性的图像上 [英] Positioning divs on top of an image that's utilizing the flex CSS property

问题描述

对于一个web应用程序，我要将一个动画表情符号和一些文本放在一个div中。这些元素将以完全响应的方式保持分离。请看：

我使用 flex 来完成这个任务。这确保了即使屏幕尺寸变得非常小，仍然通过将这些堆叠在另一个之上来保持分离。

 .act {
 display：flex; 
 flex-wrap：wrap; 
背景颜色：＃E1F5FE; 
 padding：10px; 
 border-radius：10px; 
 align-items：center; 
} 
  

接下来，div内的动画图像被包裹在：

  .anim {
 flex：1 1; 
 min-width：64px; 
 text-align：center; 
 
} 
 
 .anim> img {
 width：100％; 
 height：auto; 
最大宽度：50px; 
 
 $ / code> 

最后，文字与图片一起被包裹：

  .txt {
 flex：1 1 180px; 
 text-align：center; 
 
 b 
 
 
 
 $ b你有没有注意到眼泪滴在表情符号上？这些与图像是分开的，并将在html5中进行动画。  
 
 
我无法弄清楚如何确保泪滴能够精确地留在表情符的眼睛周围。我曾尝试使用 z-index 和位置：绝对（例如，请参阅以下内容）：
 < div class =anim> 
< div class =tearstyle =z-index：2; position：absolute; margin-top：30px; margin-left：110px;>< / div> 
< div class =tearstyle =z-index：2; position：absolute; margin-top：30px; margin-left：84px;>< / div> 
< img src =sad.png> 
< / div> 
  
完全没有反应。
 
 <此外，如果我尝试使用 position：relative ，那么无论在表情符号上重叠泪痕形状，无论 z-index 我设置了。
 
 
 
请帮我解决这个问题。理想情况下，我想坚持使用 flex ，否则，这对我的需求来说是完美的。 
 
 
 注：类似的 SO问题的答案不要帮助，因为我已经包含了他们的建议。 
    为了达到目的，你需要一个包装图像和文本，这取决于图像的大小。
 
 
这里是一个示例代码，其中我添加了一个额外的包装， image  code>，在 anim 的周围，然后将 anim 显示为行内块。
 
 
 
这里 image  wrapper成为flex项目，并允许 anim 的行为和大小作为图像，并创建需要能够把眼睛放在图像上方的固定位置的边界。
 
 
 
堆栈片段 
 
 
 
  .act {display：flex; flex-wrap：wrap; background-color：＃E1F5FE;填充：10px; border-radius：10px; align-items：center;}。image {flex：1 1; min-width：64px; text-align：center;}。anim {display：inline-block; position：relative;}。anim> img {width：100％; max-width：50px;} .txt {flex：1 1 180px; text-align：center;}。tear {position：absolute;顶部：10px; left：30px;宽度：10px;身高：10px;背景：blue;}。tear：first-child {left：10px;}  

For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold:

I'm using flex to accomplish this. That ensures that even if the screen size becomes extremely small, separation is still kept by stacking these one on top of the other.

To accomplish it, the whole outer div is wrapped in:

.act{
  display: flex;
  flex-wrap: wrap;
  background-color: #E1F5FE;
  padding: 10px;
  border-radius: 10px;
  align-items: center;
}

Next, the animated image inside the div is wrapped in:

.anim {
  flex: 1 1;
  min-width: 64px;
  text-align: center;

}

.anim > img {
  width: 100%;
  height: auto;
  max-width: 50px;
}

Lastly, the text along with the image is wrapped in:

.txt {
  flex: 1 1 180px;
  text-align: center;
}

---

Did you notice the tear drops on the emoji? Those are separate from the image, and are to be animated in html5.

I can't figure out how to ensure those tear drops stay precisely around the eyes of the emoji. I have tried using a z-index alongwith position:absolute (e.g. see the following):

    <div class="anim">
          <div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 110px;"></div>
          <div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 84px;"></div>
          <img src="sad.png">        
    </div>

This isn't responsive at all.

Moreover, If I try usingposition:relative, that makes it impossible to overlap the tear shape over the emoji, regardless of what z-index I set.

Please help me fix this situation. Ideally, I want to stick to using flex because otherwise, it's perfect for my needs.

Note: Answers to a similar SO question don't help since I've already included what they're suggesting.

解决方案

To accomplish that you need a wrapper around the image and text, that take the size of the image.

Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.

Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.

Stack snippet

.act {
  display: flex;
  flex-wrap: wrap;
  background-color: #E1F5FE;
  padding: 10px;
  border-radius: 10px;
  align-items: center;
}

.image {
  flex: 1 1;
  min-width: 64px;
  text-align: center;
}

.anim {
  display: inline-block;
  position: relative;
}

.anim>img {
  width: 100%;
  max-width: 50px;
}

.txt {
  flex: 1 1 180px;
  text-align: center;
}

.tear {
  position:absolute;
  top: 10px;
  left: 30px;
  width: 10px;
  height: 10px;
  background: blue;
}
.tear:first-child {
  left: 10px;"
}

<div class="act">

  <div class="image">
    <div class="anim">
      <div class="tear"></div>
      <div class="tear"></div>
      <img src="http://placehold.it/150">
    </div>
  </div>

  <div class="txt">
    Some text
  </div>

</div>

这篇关于将div定位在使用flex CSS属性的图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！