如何使用css使元素保持在相同的位置？

Question

我做了一个＆＃34;闪烁的眼睛＆＃34;使用CSS和HTML的效果，它在我通常的分辨率下运行良好，但是当我调整屏幕大小时，它会转到一边，检查下面的图像以便更好地理解。

即使调整屏幕大小，如何让该元素保持在正确的位置？

＆＃13;

＆＃13;

/* BLINKING EYES EFFECT LOGO */

@keyframes blink {
  /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
  0% {
    opacity: .2;
  }
  /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
  20% {
    opacity: 1;
  }
  /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
  100% {
    opacity: .2;
  }
}

.saving blinkeyes {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  font-size: 450%;
  color: red;
  position: absolute;
  left: 255px;
  top: 45px;
  z-index: 5;
}

.saving blinkeyes2 {
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  font-size: 450%;
  color: red;
  position: absolute;
  left: 302px;
  top: 45px;
  z-index: 5;
}

＆＃13;

<p class="saving">
  <blinkeyes>.</blinkeyes>
</p>
<p class="saving">
  <blinkeyes2>.</blinkeyes2>
</p>
<center><img src="http://i.imgur.com/nPvZsjB.png"></center>

＆＃13;

＆＃13;

＆＃13;

您可以在此处运行：https://jsfiddle.net/m8hak5q3/

Answer 1

根据你在问题中描述的内容，头骨的图像与眨眼的眼睛有不同的位置。

因此，为了让它们一起移动，需要将它们放在像div这样的容器中，并将div设置为position:relative。然后将position: absolute应用于头骨图片和两只红眼睛。

例如，Html可能是（假设头骨图像宽度为100px，高度为100px）：

<div id="container">
    <p class="saving"><blinkeyes>.</blinkeyes></p>
    <p class="saving"><blinkeyes2>.</blinkeyes2></p>
    <img src="skull-with-crown.jpg" width="100" height="100" />
</div>

那么css部分，除了红眼css（你可能需要改变blinkeyes和blinkeyes2的顶部和左边的一点）：

#container{
    position:relative;
    width: 100px;
    height: 100px;
}
#container img{
    position: absolute;
    left: 0;
    top: 0;
}

这可能只是一种方法。可能还有其他你喜欢的东西。希望这可以提供帮助。

Answer 2

1. 正如其他许多人所说的那样，你需要将你的标志和眼睛包裹在position relative的{​​{1}}中，然后只需调整眼睛的位置即可
2. 我还通过在justify上设置blinkeyes来简化您的代码，因此您只需要一个，并且可以调整宽度以指定它们之间的距离。
3. 您需要在所有浏览器中使用通用字体才能保持一致。我添加了font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
4. 您的示例图片的瞳孔大于演示版（可能是因为前面提到的字体问题）所以我将您的句点更改为大黑圈●
5. 自定义元素还不是标准，所以我将blinkeyes更改为带有类的div
6. 在不同环境下，450％的字体大小可能很危险，因此我将其设置为固定大小。
＆＃13;
＆＃13;
/* BLINKING EYES EFFECT LOGO */
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}
#logo_wrapper{
  margin:0 auto;
  overflow:hidden;
  width:513px;
  position:relative;
}
.blinkeyes {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    text-align:justify;
    text-justify:inter-word;
    width:68px;
    position:absolute;
    top:67px;
    left:37px;
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    font-size: 40px;
    color: red;
    z-index: 5;
}
＆＃13;
<div id='logo_wrapper'>
  <img src="http://i.imgur.com/nPvZsjB.png">
  <div class='blinkeyes'>
    &#9679; &#9679; &nbsp;&nbsp;&nbsp;
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

JSFiddle ：https://jsfiddle.net/m8hak5q3/8/

Answer 3

我创建了一个DEMO

我添加了一些css并更改了一些左眼顶部的位置。看看。

center{
  position:relative;
}
.saving{ 
  position:absolute;
}

新摘条如下：

/* BLINKING EYES EFFECT LOGO */
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving blinkeyes {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    font-size: 450%;
    color: red;

    position: absolute;
    left: 40px;
    top: 29px;
    z-index: 5;
}

.saving blinkeyes2 {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    font-size: 450%;
    color: red;

    position: absolute;
        left: 83px;
    top: 29px;
    z-index: 5;
}
center{
  position:relative;
}
.saving{ 
  position:absolute;
}

<center>
  <span class="saving"><blinkeyes>.</blinkeyes></span>
  <span class="saving"><blinkeyes2>.</blinkeyes2></span>
  <img src="http://i.imgur.com/nPvZsjB.png">
</center>

Answer 4

您需要wrapper div class="wrap"，其中position: relative有<div class="wrap"> <p class="saving"><blinkeyes>.</blinkeyes></p> <p class="saving"><blinkeyes2>.</blinkeyes2></p> </div> .wrap { position: relative; margin: 0 auto; /* this does the centering */ background-image: url(http://i.imgur.com/nPvZsjB.png); background-repeat: no-repeat; width: 513px; height: 139px; } /* BLINKING EYES EFFECT LOGO */ @keyframes blink { /** * At the start of the animation the dot * has an opacity of .2 */ 0% { opacity: .2; } /** * At 20% the dot is fully visible and * then fades out slowly */ 20% { opacity: 1; } /** * Until it reaches an opacity of .2 and * the animation can start again */ 100% { opacity: .2; } } .saving blinkeyes { animation-name: blink; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; font-size: 450%; color: red; position: absolute; left: 80px; top: 28px; z-index: 5; } .saving blinkeyes2 { animation-name: blink; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; font-size: 450%; color: red; position: absolute; left: 35px; top: 28px; z-index: 5; } 。然后绝对位于此包装内的所有内容都将绝对位于相对元素内部的左上角。

https://jsfiddle.net/m8hak5q3/6/

Node ClosestDescendent ( Node root, Node left, Node right ) 
{
   // ... 
}

class Node
{
    int val;
    Node left; 
    Node right;
}