Question: I am trying to position images relatively to the main image - the rest of the images should be positioned on the left, right and top of the main image. 

```
   <div class="top">
            <img class="top__position" src="https://place-hold.it/300x150" alt="">
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
   </div>

```

I struggle with the execution of this task - I put the position relative on the top\_\_position class and position absolute on the top\_\_winner and top: 

```
.top__winner:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 20px;

}

```

Answer: 
> 
> I put the position relative on the top\_\_position
> 
> 
> 

You need to put `position: relative` on `.top`, not `.top__position`.

EDIT: 

`position: absolute` absolutely positions (i.e. obeys `top`,`left`,`bottom`,`right` properties) an element **relative** to it's nearest positioned (`relative`, `absolute`, or `fixed`) ancestor.
Something like this I presume

[Click here for Javascript Fiddle](https://jsfiddle.net/a51bhLd6/1/)

```
.top {
position: relative;
padding: 0 0; // Your image is 80px high so this will give 20px under
height: 100%;
min-height: 350px;
}

.top .top__position {
max-width: calc(100% - 200px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.top div.top__winner {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(2) {
  right: 0;
  left: unset;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(3) {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

```