Question 43165 in Html Question posted in
Some basic documentation can be found here.

CSS top property is not working for surrounding-image class – Html

Whenever I change the top property for any of my .planets-container .surrounding-image:nth-of-types, the images remain in the same position. I would like to be able to move my images around my page using the top property, but the top property does not seem to be working.

I tried changing the position values to absolute/fixed/relative, but nothing seemed to work. I don’t know why the top property isn’t working for any of my surrounding images. My goal is to have the center image in the middle of my page with all other surrounding images surrounding the center image, with some of them being slighly higher or lower than the center. The left property works fine for me, it is just the top property that I am having problems with.
Here is my HTML and CSS Code:

.planets-container {
  position: relative;
  margin-top: 300px;
  /* changed from 300px */
  padding-top: 5%;
}

.center-image {
  border: none;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: auto;
  z-index: 1;
  background-color: transparent;
  margin-top: -100px;
  /* changed from 0 */
}

.surrounding-image {
  border: none;
  position: absolute;
  width: 250px;
  height: auto;
  background-color: transparent;
  z-index: 2;
}


/* positions of surrounding images */

.planets-container .surrounding-image:nth-of-type(2) {
  top: 10%;
  left: 20%;
}

.planets-container .surrounding-image:nth-of-type(3) {
  top: 30%;
  left: 50%;
}

.planets-container .surrounding-image:nth-of-type(4) {
  top: 30%;
  left: 50%;
  bottom: 20%;
}

.planets-container .surrounding-image:nth-of-type(5) {
  top: 80%;
  left: 50%;
}

.planets-container .surrounding-image:nth-of-type(6) {
  top: 70%;
  left: 30%;
}
<div class="planets-container">
  <img src="images/planets/137-1375528_top-earth-clip-art-free-clipart-spot-earth-removebg-preview.png" class="center-image">
  <img src="images/planets/hdplanet1-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet2-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet3-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet4-removebg-preview.png" class="surrounding-image">
  <img src="images/planets/hdplanet5-removebg-preview.png" class="surrounding-image">
</div>
Tags:

2

Answers


  1. 0

    The top property is working but the height of your .planets-container div is so small (something like 39 pixels) that setting top:30% is only around 13px or so. Absolutely positioned elements don’t cause the parent container to resize as they’re taken out of the normal flow. See w3.org for details. Set your container to a defined height.

    Login or Signup to reply.
  2. 0

    Looks like this works:

    .planets-container {
    position: relative;
    margin-top: 300px;
    /* changed from 300px */
    padding-top: 5%;
    border: solid 1px blue;
    height: 50%;
  }

    <div class="planets-container">
    <div class="center-image">
        <img src="images/planets/137-1375528_top-earth-clip-art-free-clipart-spot-earth-removebg-preview.png"
            alt="center">
    </div>
    <div class="surrounding-image">
        <img src="images/planets/hdplanet1-removebg-preview.png" alt="surr1">
    </div>
    <div class="surrounding-image">
        <img src="images/planets/hdplanet2-removebg-preview.png" alt="surr2">
    </div>
    <div class="surrounding-image">
        <img src="images/planets/hdplanet3-removebg-preview.png" alt="surr3">
    </div>
    <div class="surrounding-image">
        <img src="images/planets/hdplanet4-removebg-preview.png" alt="surr4">
    </div>
    <div class="surrounding-image">
        <img src="images/planets/hdplanet5-removebg-preview.png" alt="surr5">
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search