Positioning of divs changes based on viewport

Question

I'm trying to make 4 circles appear when the central circle is clicked, much like

.

However, when I resize the viewport, the position of the divs change, as shown in the code below. I tried making the position relative, but that doesn't work. https://codepen.io/Refath/pen/NJbEQO

Here's the code in question:

.subOne{
    position: relative;
    top: -200px;
    left: 445px;
}

.subTwo{
    position: relative;
    top: -650px;
    left: 445px;
}

.subThree{
    position: relative;
    top: -570px;
    left: 255px;
}

.subFour{
    position: relative;
    top: -670px;
    left: 650px;
}

One idea I had was to wrap the subcircles in a seperate container div, and translate the container based on the viewport, although I'm not sure how feasible that would be.

Answer 1

With position: relative on the surrounding items and pixel positioning, you're not going to get a responsive layout.

First, with position: relative, the element is positioned relative to its original position, not the center circle. This results in a misalignment.

Second, a positioned element with top: -670px; left: 650px; may look okay on wider screens, but is way outside the viewport on smaller screens. This also messes up your alignment.

Instead, remove the surrounding items from the normal flow with position: absolute, make them relative to their container (with position: relative), and use percentage lengths for adaptability.

revised codepen

$(document).ready(function() {

  $(".subOne").hide();
  $(".subTwo").hide();
  $(".subThree").hide();
  $(".subFour").hide();


  $(".mainCircle").bind('click', function() {
    $(this).toggleClass('blue');
    $(".subOne").slideToggle('fast');
    $(".subTwo").slideToggle('fast');
    $(".subThree").slideToggle('fast');
    $(".subFour").slideToggle('fast');

  });

});

body {
  margin: 0;
}

.container {
  position: relative;
}

.subContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: coral;
}

.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
  border: 2px red solid;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background: blue;
  transition: 0.3s ease all;
}

.subOne {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%); /* see link below for explanation */
}

.subTwo {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.subThree {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.subFour {
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translate(50%, -50%);
}

.mainCircle:hover {
  background: lightblue;
  transition: 0.3s ease all;
}

.blue {
  border: 10px black solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="subContainer">
    <div class="mainCircle"></div>
  </div>
  <div class="subOne"></div>
  <div class="subTwo"></div>
  <div class="subThree"></div>
  <div class="subFour"></div>
</div>

More details: Element will not stay centered, especially when re-sizing screen

Answer 2

You can use percentages instead of pixels to get the layout. But I would do this with a slight change in markup and using a wrapping flexbox like so:

1. Move your circles into pseudo element and their hover styles.

2. Put one circle in the first row, three in the second (including the mainCircle) and one in the last row - use order property for the ordering and and flex-basis for the number of circles in each row.

3. You can use margin: 0 auto to center each circle in their space. And also throw in align-content: space-around for a uniform alignment.

4. Now all you can adjust the relative distances by varying the height and width of the subContainer.

See demo below:

$(document).ready(function() {
  $(".subOne").hide();
  $(".subTwo").hide();
  $(".subThree").hide();
  $(".subFour").hide();
  $(".mainCircle").bind('click', function() {
    $(this).toggleClass('blue');
    $(".subOne").slideToggle('fast');
    $(".subTwo").slideToggle('fast');
    $(".subThree").slideToggle('fast');
    $(".subFour").slideToggle('fast');
  });
});

body {
  overflow-y: none;
}

.container {
  background: coral
}

.subContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  height: 97vh;
  height: 500px; /* ADJUST THIS */
  width: 500px;  /* ADJUST THIS */
  margin: 0 auto;
  background: coral;
}

.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
  flex: 0 0 auto;
}

.mainCircle:after,
.subOne:after,
.subTwo:after,
.subThree:after,
.subFour:after {
  content: '';
  display: block;
  border: 2px red solid;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  border-radius: 100px;
  background: blue;
  transition: 0.3s ease all;
}

.mainCircle:hover:after {
  background: lightblue;
  transition: 0.3s ease all;
}

.blue:after {
  border: 10px black solid;
}

.subOne {
  order: 1;
  flex-basis: 100%;
}

.subTwo {
  order: 2;
  flex-basis: 33.33%;
}

.mainCircle {
  order: 3;
  flex-basis: 33.33%;
}

.subThree {
  order: 4;
  flex-basis: 33.33%;
}

.subFour {
  order: 5;
  flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="subContainer">
    <div class="mainCircle"></div>
    <div class="subOne"></div>
    <div class="subTwo"></div>
    <div class="subThree"></div>
    <div class="subFour"></div>
  </div>
</div>