Προβλημα με δυο εικόνες

[Gunix]

Γεια σας.

 

Θα ήθελα την βοήθεια σας παρακαλώ.

Φτιάχνω μια δικιά μου ιστοσελίδα layout με το bootstrap. Το πρώτο που έχω φτιάξει είναι ένα navbar. Το δεύτερο που θέλω να φτιάξω είναι ένα animation. Οι δύο εικόνες που έχω είναι ένα ορθογώνιο στατικό και ένα μικρό κύκλο που θα προχωράει. Μέσα στην CSS έχω κάνει αυτό. Αλλά όταν χρησιμοποιώ το responsive design mod ο κύκλος φεύγει από πάνω το ορθογώνιο. Πως μπορώ να το φτιάξω αυτό?

.image1 {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0;
}
.image2 {
  width: 10%;
  position: absolute;
  top: 400px;
  left: 70px;
}

[dominotrix]

Ειναι πολυ δυσκολο να κανουμε visualize αυτο που φτιαχνεις μονο απο το css. Εχεις καποιο λινκ με τη σελιδα ή τουλαχιστον καποιο codepen? Αν οχι, ετοιμασε ενα codepen ή τουλαχιστον δωσε μας και την html.

[Chemical]

Επειδή έχεις fixed τιμές στα top και lefty. Μετέτρεψε τα σε ποσοστά. πως θα το κάνεις αυτο;
Χρειάζεσαι ένα σημείο αναφοράς. πχ αν στα 1280 viewport width το .image2 έχει left 70px τοτε σε ποσοστο ειναι 
(70 / 1280) * 100 = 5.46875

αρα  left = 5.46875 %