Элемент Div вывести из родителя div?

Question

Я работаю над проектом, и у меня есть небольшая проблема с DIV, сценарий ниже: -

section.portfolio 
    .flex.flex--center 
    .col-1 
     .img-strip 
    .col-1.order-first 
     p.home-lead.outdented Lore ipsum 
     a(href="#").home-cta See More 

http://codepen.io/alb_dev/pen/KaxMVv

я клал в codepen вы можете увидеть проблему у меня есть:

1. розовый ДИВ я хочу, чтобы положить сторону к DIV, которые имеют текст и элемент кнопки i want to put the file like this on the photo

но когда я положил Див розовый в: -

.img-strip 
    position: absolute 
     background:pink 
     top: 0 
     margin: -50px 0 
     width: 100% 
     height:100% 

и DIV родитель в: -

position:relative 

ДИВ в розовый исчезают вы можете увидеть на codepen у меня есть пост.

Надеюсь, что я хорошо объяснил свою проблему, если нет, пожалуйста, дайте мне знать!

Answer 1

Использование position: fixed вместо position:absolute

Answer 2

Есть некоторые основные проблемы со структурой кода. Поскольку у вас уже есть сетка-система на месте с использованием метода, который вам не рекомендуется. Итак, из того, что я мог понять о вашей проблеме, следующее решение.

HTMLстарый

<div class="col-1"> 
    <div class="img-strip"></div> 
</div> 

HTML новый

<div class="col-1 img-strip"> 

CSSстарый

section.portfolio .img-strip { 
    position: absolute; 
    background: pink; 
    top: 0; 
    margin: -50px 0; 
    width: 100%; 
    height: calc(100% + 100px); 
} 

CSSновый

section.portfolio .img-strip { 
    background: pink; 
    width: 320px; /* Depending on what width you want col-1 has a maximum width if 320px */ 
    height: 200px; 
}