What can be used to position a group of absolute items?

HTML & CSS
1

How would I go about moving the image around inside the container which would be smaller?

I’m not sure if I set this up right.

code: https://jsfiddle.net/gvzk62qe/5/

.container {
  width: 780px;
  height: 780px;
  background: blue;
}

.verticalLine1 {
  position: absolute;
  top: 294px;
  left: 237px;
  width: 10px;
  height: 107px;
  background: black;
  border-radius: 5px;
}

.verticalLine2 {
  position: absolute;
  top: 266px;
  left: 263px;
  width: 10px;
  height: 163px;
  background: black;
  border-radius: 5px;
}

.verticalLine3 {
  position: absolute;
  top: 257px;
  left: 289px;
  width: 10px;
  height: 197px;
  background: black;
  border-radius: 5px;
}


.verticalLine4 {
  position: absolute;
  top: 255px;
  left: 315px;
  width: 10px;
  height: 223px;
  background: black;
  border-radius: 5px;
}

.verticalLine5 {
  position: absolute;
  top: 261px;
  left: 341px;
  width: 10px;
  height: 242px;
  background: black;
  border-radius: 5px;
}

.verticalLine6 {
  position: absolute;
  top: 276px;
  left: 367px;
  width: 10px;
  height: 252px;
  background: black;
  border-radius: 5px;
}

.verticalLine7 {
  position: absolute;
  top: 295px;
  left: 393px;
  width: 10px;
  height: 255px;
  background: black;
  border-radius: 5px;
}

.verticalLine8 {
  position: absolute;
  top: 276px;
  left: 419px;
  width: 10px;
  height: 252px;
  background: black;
  border-radius: 5px;
}

.verticalLine9 {
  position: absolute;
  top: 261px;
  left: 445px;
  width: 10px;
  height: 242px;
  background: black;
  border-radius: 5px;
}

.verticalLine10 {
  position: absolute;
  top: 255px;
  left: 471px;
  width: 10px;
  height: 223px;
  background: black;
  border-radius: 5px;
}

.verticalLine11 {
  position: absolute;
  top: 257px;
  left: 497px;
  width: 10px;
  height: 197px;
  background: black;
  border-radius: 5px;
}

.verticalLine12 {
  position: absolute;
  top: 266px;
  left: 523px;
  width: 10px;
  height: 163px;
  background: black;
  border-radius: 5px;
}

.verticalLine13 {
  position: absolute;
  top: 294px;
  left: 549px;
  width: 10px;
  height: 107px;
  background: black;
  border-radius: 5px;
}

<div class="container">
  <div class="verticalLine1 ">
  </div>
  <div class="verticalLine2 ">
  </div>
  <div class="verticalLine3 ">
  </div>
  <div class="verticalLine3 ">
  </div>
  <div class="verticalLine4 ">
  </div>
  <div class="verticalLine5 ">
  </div>
  <div class="verticalLine6 ">
  </div>
  <div class="verticalLine7 ">
  </div>
  <div class="verticalLine8 ">
  </div>
  <div class="verticalLine9 ">
  </div>
  <div class="verticalLine10 ">
  </div>
  <div class="verticalLine11 ">
  </div>
  <div class="verticalLine12 ">
  </div>
  <div class="verticalLine13 ">
  </div>
</div>
2

Do what you just did but make the blue box the exact same size as the overall heart shape. Give the blue box position:absolute and then change all the absolute co-ordinates to the required spots.

Then you can position the single smaller box inside any position:relative container without re-doing all the positions for the lines.

2 Likes
3

How would I put this inside of a grid, and is that possible to do?

Where I would be able to change the space between the lines.

Can that be done with this code?

https://jsfiddle.net/pdcar6g1/4/

.container {
  width: 322px;
  height: 295px;
  background: blue;
}

.verticalLine1 {
  position: absolute;
  top: 47px;
  left: 8px;
  width: 10px;
  height: 107px;
  background: black;
  border-radius: 5px;
}

.verticalLine2 {
  position: absolute;
  top: 19px;
  left: 34px;
  width: 10px;
  height: 163px;
  background: black;
  border-radius: 5px;
}

.verticalLine3 {
  position: absolute;
  top: 10px;
  left: 60px;
  width: 10px;
  height: 197px;
  background: black;
  border-radius: 5px;
}

.verticalLine4 {
  position: absolute;
  top: 8px;
  left: 86px;
  width: 10px;
  height: 223px;
  background: black;
  border-radius: 5px;
}

.verticalLine5 {
  position: absolute;
  top: 14px;
  left: 112px;
  width: 10px;
  height: 242px;
  background: black;
  border-radius: 5px;
}

.verticalLine6 {
  position: absolute;
  top: 30px;
  left: 138px;
  width: 10px;
  height: 252px;
  background: black;
  border-radius: 5px;
}

.verticalLine7 {
  position: absolute;
  top: 47px;
  left: 164px;
  width: 10px;
  height: 255px;
  background: black;
  border-radius: 5px;
}

.verticalLine8 {
  position: absolute;
  top: 30px;
  left: 190px;
  width: 10px;
  height: 252px;
  background: black;
  border-radius: 5px;
}

.verticalLine9 {
  position: absolute;
  top: 14px;
  left: 216px;
  width: 10px;
  height: 242px;
  background: black;
  border-radius: 5px;
}

.verticalLine10 {
  position: absolute;
  top: 8px;
  left: 242px;
  width: 10px;
  height: 223px;
  background: black;
  border-radius: 5px;
}

.verticalLine11 {
  position: absolute;
  top: 10px;
  left: 268px;
  width: 10px;
  height: 197px;
  background: black;
  border-radius: 5px;
}

.verticalLine12 {
  position: absolute;
  top: 19px;
  left: 294px;
  width: 10px;
  height: 163px;
  background: black;
  border-radius: 5px;
}

.verticalLine13 {
  position: absolute;
  top: 47px;
  left: 320px;
  width: 10px;
  height: 107px;
  background: black;
  border-radius: 5px;
}

<div class="container">
  <div class="verticalLine1 ">
  </div>
  <div class="verticalLine2 ">
  </div>
  <div class="verticalLine3 ">
  </div>
  <div class="verticalLine4 ">
  </div>
  <div class="verticalLine5 ">
  </div>
  <div class="verticalLine6 ">
  </div>
  <div class="verticalLine7 ">
  </div>
  <div class="verticalLine8 ">
  </div>
  <div class="verticalLine9 ">
  </div>
  <div class="verticalLine10 ">
  </div>
  <div class="verticalLine11 ">
  </div>
  <div class="verticalLine12 ">
  </div>
  <div class="verticalLine13 ">
  </div>
</div>
4

How come it’s not fully on the blue background?
How come the whole thing dropped 7px down below the blue?

https://jsfiddle.net/ecuoj6qy/1/

Like it is fully on the background here?
https://jsfiddle.net/ufbwLe39

  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 16px;
  width: 328px;
  height: 295px;
  background: blue;

Grid

Absolute Positioning:

5

Last updated: Width removed from div classes

Still not aligned on the blue background.

https://jsfiddle.net/ojy7qfdu/1

.container {
  display: grid;
  grid-column-gap: 16px;
  grid-auto-flow: column;
  /*grid-template-columns: repeat(13, 10px);*/
  width: 322px;
  height: 294px;
  background: blue;
}

ohhh.

I forgot to add relative on the container.
https://jsfiddle.net/ksjc731f/

I have to realign everything.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.