Установка абсолютного положения

Question

Я использую плагин jQuery для слайдера. Он отображает по 3 элемента за раз и добавляет класс slick-active к активным элементам.

Я хочу, чтобы отобразить только средний элемент как полную ширину, но хочу, чтобы отобразить только 50% от первого и последнего элементов, как показано на следующем рисунке:

Для этой цели, я пытаюсь установите абсолютное положение 50%, но оно не работает. Я не могу понять, как установить позицию для получения вышеуказанных результатов.

Это то, что я пытаюсь:

.slick-active:first-child{ 
    position: absolute; 
    left: -50%; 
} 

.slick-active:last-child{ 
    position: absolute; 
    right: -50%; 
} 

Демо: http://jsfiddle.net/yu76xt4f/

Answer 1

я добавил следующие CSS, которые я не рекомендую. как он использует !important. Я использую !important, чтобы переопределить встроенный стиль, предоставляемый плагином.

CSS

.slick-slide.slick-active{ 
    width: 100px !important; 
} 

.slick-slide.slick-active + .slick-slide.slick-active{ 
    width: 400px !important; 
} 

.slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active{ 
    width: 100px !important; 
} 

Working Fiddle

Answer 2

Попробуйте это, Использование позиция: относительная вместо абсолютной. и предоставлять фиксированную стоимость вместо процента.

.slick-active:first-child{ 
    position: relative; 
    left: -50px; 
} 

.slick-active:last-child{ 
     position: relative; 
     left: -50px; 
} 

.slick-active { 
    position: relative; 
    left: -50px; 
}