overflow hidden и невозможность перекрыть границы

[Zverushka]

http://jsfiddle.net/p65S9/1/

Вот такая ситуация. Стоит поставить обрезание - как нельзя поместить внутренний слой поверх границ так - чтобы слой перекрывал эти границы. 

Как это обойти?

Edited January 10, 2014 by Zverushka

[da4ka]

а в какой ситуации это может понадобится?

[Zverushka]

Раскрывание части контента, скрытого overflow через анимацию на jquery.

[bvvell]

Если прописывать overflow:hidden, то элементы внутри блока не получится вытянуть поверх блока, потому что при o:h отображается только внутренняя область элемента,а все что выходит за его пределы скрывается

Раскрывание части контента, скрытого overflow через анимацию на jquery.

 

а зачем скрывать контент через overflow?

[da4ka]

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

[Zverushka]

Там такой элемент дизайна, что один блок заходит на границы, но при этом не выходит за пределы блока - типа границы резко обравываются (при этом сверху блок другого цвета).

Когда jquery анимирует, он ставит Overflow:hidden - и получаются скачки анимации - то граница сплошная и вдруг резко становится как нужно. В принципе он правильно делает, что ставит оверфлоу. Я бы тоже его у себя в коде оставила - но тогда я вообще не могу реализовать эту врезку. И даже position relative, z-index: 1 не помогает - так как видимо идет некое обрезание внутри границ.

[da4ka]

а можно скриншот, то я не очень хорошо представляю как оно выглядит?

[Zverushka]

 http://zverushka.zz.mu/oil/

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

[bvvell]

Может глупый совет, но если содержимое блока catalog-item обернуть в еще один див, и прописать ему стили от catalog-item, то должно будет работать нормально, анимироваться будет только catalog-item а внутри все будет выглядеть как надо

[klierik]

 http://zverushka.zz.mu/oil/

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

 

а что если на .catalog-item.active повесить не border:, а вместо этого растянуть абсолютный :before с бордером? Задать ему z-index: 1;

Ну а потом для .incut relative + z-index: 2

[npofopr]

А какой смысл врезки? Вы же хотите чтобы над врезкой тоже был виден бордер?

Фон белый, врезка белая. Зачем там вообще отрицательные марджины?

[Zverushka]

А какой смысл врезки? Вы же хотите чтобы над врезкой тоже был виден бордер? Фон белый, врезка белая. Зачем там вообще отрицательные марджины?

Врезка как в дизайне. Там не должно быть бордера. Отрицательные маргины как раз для этого - чтобы врезка была без краев.