Получить div вне родительского div без абсолютной позиции

Question

У меня проблема с css. У меня есть div с максимальной шириной. В этом div есть img, который должен быть расположен за пределами его div (внизу). К сожалению, я не могу использовать абсолютную позицию из-за максимальной ширины. Когда я буду использовать положение абсолютное, в какой-то момент ширина экрана достигает максимальной ширины, а img с абсолютным положением будет выходить за пределы div с правой стороны.

Я знаю, что это должно звучать немного грязный, поэтому я сделал Jsfiddle: https://jsfiddle.net/te93s8h1/

Этот JS Fiddle показывает пример вопроса я получил. Мне нужен зеленый блок вне div (внизу), но зеленый блок не может выйти за пределы div с правой стороны. Как я могу это достичь?

Я предпочитаю только css.

Answer 1

Не обращайте внимания на мой вопрос, я думаю, я понимаю, чего вы пытаетесь достичь. Вы должны добавить оператор position: relative; в блок стиля вашего класса .grid, как показано в этом JSFiddle.

Answer 2

Просто попробуйте это, не используя абсолютную позицию.

.container { 
 
    background-color: #00f; 
 
    width: 98%; 
 
    height: 100px; 
 
    margin: auto; 
 
    max-width: 1300px; 
 
} 
 

 
.grid { 
 
    position: relative; /* Added Position */ 
 
    background-color: #f00; 
 
    width: 50%; 
 
    margin: auto; 
 
    min-width: 600px; 
 
    height: 100px; 
 
} 
 

 
.block_outside_div { 
 
    position: inherit; /* Added Position */ 
 
    background-color: #0f0; 
 
    height: 50px; 
 
    width: 50px; 
 
    left: 45%; /* 45% Percentage value for move from left */ 
 
    top: 120px; /* 120px value for move from top */ 
 
}

<div class="container"> 
 
    <div class="grid"> 
 
    <div class="block_outside_div"> 
 
    </div> 
 
    </div> 
 
</div>