Float с% -Width внутри абсолютного позиционируется DIV

Question

Я сделал это раньше, но не с начальной загрузкой, и я не могу вспомнить раствора в последний раз либо ..

То, что я хочу: отзывчивый дизайн с использованием bootstrap, где каждому столбцу задана ширина с использованием процента.

Что клиент хочет:. Хорошие переходы между страницами, где старый один выскальзывает и новые слайды в

Решение: $(".page").css("left", something) и положить на некоторых переходных свойств с помощью CSS3.

Что необходимо для такого решения: только элементы с абсолютным положением могут использовать верхнее и левое свойство.

Проблема: Столбцы теперь не реагируют на то, что они размещены внутри абсолютного позиционированного div! :(

<div id="pagewrapper"> 
    <div class="container page"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <p>Bla bla bla bla bla bla</p> 
      </div> 
      <div class="col-xs-6"> 
       <p>Bla bla bla bla bla bla</p> 
      </div> 
     </div> 
    </div> 
</div> 
<style> 
#pagewrapper { 
    /* 
    margin and padding because I have a fixed header and footer 
    */ 
    margin: 0 auto; 
    padding: 60px 25px; 
    position: relative; 
} 

.page { 
    position: absolute; 
    /* mixins for LESS I dont have here now 
    .transition-duration(2s); 
    .transition-property(left); 
    */ 
} 
</style> 

Вот JSFIDDLE. position: absolute закомментирована сейчас, ucomment и вы увидите разницу.

Answer 1

верхний и левый свойство может быть использовано относительно позиционированных элементов.

.page{position: relative; left: 100%;} 

положение относительно не должны изменять свой адаптивный макет и позволит вам использовать ваши CSS анимации.