How to make element stay in the same position using css?

Question

I've made a "Blinking Eye" effect using CSS and HTML, it worked fine on my usual resolution, but when I resized the screen it went to the side, check the images below to better understand.

How can I make that element stay in the right place, even when resizing the screen?

/* 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;
}

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

You can run it here: https://jsfiddle.net/m8hak5q3/

Answer 1

A really simple way to make an element stay in the same position even when the user scrolls (such as a 'div' element color) is to just use:

div{position:fixed;}

This locks the position of the element to a certain amount of pixels

Answer 2

1. As many others have said, you need to wrap your logo and eyes in a div who's position is relative and then it is just a matter of tweaking the position of the eyes.
2. I have also simplified your code a little by setting the justify on the blinkeyes so you only need one, and can just tweak the width to specify how far apart they are.
3. You will need to have a common font across all browsers for this to be consistent. I have added font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
4. Your sample images had larger pupils than the demo, (Probably because of the aforementioned font issue) so I changed your periods into large black circles ●
5. Custom Elements are not exactly a standard yet, so I changed blinkeyes into a div with a class instead
6. The font size of 450% could be dangerous given different environments, so I set it to a fixed size.

/* 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;
}

<div id='logo_wrapper'>
  <img src="http://i.imgur.com/nPvZsjB.png">
  <div class='blinkeyes'>
    &#9679; &#9679; &nbsp;&nbsp;&nbsp;
  </div>
</div>

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

Answer 3

You need a wrapper like div class="wrap" which has position: relative. Then everything positioned absolutely inside this wrap will be absolute from top left inside the relative element.

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

<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;
}

Answer 4

I have created one DEMO

I have added some css and changed some left top position of eyes. Have a look.

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

New snippet looks like:

/* 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 5

From what you have described in the question, the image of the skull has different position from the blink eyes.

So to keep them moving together, they need to be put in one container like a div and set the div as position:relative. Then apply position: absolute to the skull picture and the two red eyes.

For Example, Html might be(assuming the skull image is 100px width and 100px height):

<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>

Then the css part, other than the red eye css(you might need to change a bit of the top and left of blinkeyes and blinkeyes2):

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

This might be just one of approaches. There might be something else that you would prefer. Hope this can help.