Jak wyciągnąć element na wierzch?

Wyobraźmy sobie stronę z sidebarem:

<div id="container">
    <div class="sidebar">
    </div>
    <div class="content">
        <div class="element">Ten element chciałabym mieć na wierzchu</div>
    </div>
</div>

Sidebar się chowa i pojawia jak się kliknie ikonkę od tego. Content ma zależny od tego padding - albo 0, albo równy szerokości sidebara. Po to padding, żeby width mogło być po prostu 100% (z box-sizing: border-box).
Sidebar dostał z-index = 1000, żeby wyświetlać się przed contentem.

I teraz mam taki trochę nietypowy element - w przykładzie div o nazwie element. Ten element wyświetla się obok contentu, gdy sidebar jest schowany. A gdy sidebar się pojawia, to ma się on wyświetlić na sidebarze (w efekcie w tym samym miejscu strony, tylko że pod pojawia się sidebar). Niestety, z-index sprawia, że sidebar po prostu zasłania element.

Dodatkowym utrudnieniem jest fakt, że element ma position: absolute i kilka wrapperów nad sobą.

Czy da się tak zakombinować z z-indexami, żeby ten element wyświetlał się na wierzchu?
Czy lepiej dać se spokój i powtórzyć element na sidebarze? ;)

By z-index działał musisz użyć właściwości position, polecam w tym wypadku position: relative;

Element musi być być position absolute, bo tak wynyika z layoutów. Jest on jednak w elemencie element_wrapper, który już ma position relative (dający też punkt odniesienia temu absolute). Temu wrapperowi też próbowałam nadać z-index wyższy niż sidebarowi, ale nie pomogło.
A sidebar ma position fixed, i też tak musi być ;) (ale na nim z-index działa)

wykonanie tego jest troche nielogiczne, bo skoro sidebar ma byc nad divem content a div element jest jego dzieckiem to niepoprawnym jest wyrywanie element z content i umieszacnie ponad sidebar, wiec w zwiazku z tym dlaczego:

1. element jest w divie content ? Nie mozna go wyciagnac i wsadzic miedzy sidebar a content (lub nawet przed sidebar skoro i tak ma sie do dokumentu jak piesc do oka, bo jest od niego neizaleznyi dokowany do krawedzi ekranu) i wtedy nie bedzie klopotu z z-index i wszystko bedzie ulozone.

2. Mozna zeby nie lamac DRY, to na metodzie click przenosic element w odpowiednie miejsca. Idea umieszczenia element w sidebar.

I ostatnia rzecz, bawienie sie w takie "pozycjonowanie", ktore zawiera duzo absolute i fixed powoduje, ze strona najprawdopodobniej zlamie responsywnosc, ew. trzeba bedzie nadpisywac mnostwo regul dla roznych szerokosci ekranu.
Nie wiem czy to tyczy sie tej strony, ale tak mnie anszlo.

Ale jak widac nie jest to niemozliwe w prostym przykladzie:
http://jsbin.com/xededudiva/edit?html,css,output

wiec cos pewnie u Ciebie to blokuje.

wykonanie tego jest troche nielogiczne, bo skoro sidebar ma byc nad divem content a div element jest jego dzieckiem to niepoprawnym jest wyrywanie element z content i umieszacnie ponad sidebar, wiec w zwiazku z tym dlaczego:

No zgadzam się ;) Na razie rozwiązałam to inaczej (bo przede wszystkim ma działać przed deadlinem), ale byłam ciekawa czy w ogóle da się takie czary robić.

Ad. 1. To dlatego, że jego ułożenie zależy od ułożenia jednego z elementów content (przynajmniej w wersji gdy sidebar jest schowany). Przybliże bardziej wygląd strony.
W content mamy 3 sekcje (section). Pierwsza i druga sekcja mają szerokość na całą stronę, trzecia sekcja ma paddingi po bokach i pojawiają się wtedy dodatkowe przycisku na lewo i prawo, które mają być przyklejone do dołu tej sekcji, a nie do dołu ekranu (stąd position absolute). Nie mogą się te przyciski wyświetlać niezależnie od sekcji, bo w pierwszej i drugiej wjechało by to na tło/tekst.

Ad. 2. Szczerze mówiąc nie specjalnie mi się podoba to rozwiązanie. Na razie zrobiłam inaczej - żeby nie łamać dry, zrobiłam oddzielny template, który includuję i w content i w sidebarze. Gdy sidebar wyjeżdża to po prostu zasłania ten element w content. Wada tego rozwiązania jest taka, że element na sidebareze nie jest przyklejony do sekcji - ale chyba nie jest to problem, bo sidebar i tak przesuwa content na bok.

I ostatnia rzecz, bawienie sie w takie "pozycjonowanie", ktore zawiera duzo absolute i fixed powoduje, ze strona najprawdopodobniej zlamie responsywnosc, ew. trzeba bedzie nadpisywac mnostwo regul dla roznych szerokosci ekranu.

To jak inaczej proponujesz zrobić sidebar, który nie przesuwa się z wraz z resztą strony?
Zdaję sobie sprawę z ograniczeń poistion absolute czy fixed, ale co ja poradzę, że grafik ma fantazję ;)

z opisu wynika, ze wybralas najsensowniejsze wyjscie, czyli powielenie elementu, bo dla mnie to sa dwa oddzielne elementy i mimo, ze wygladaja tak samo to powinny byc umieszczone w innych miejscach i sa zalezne od ulozenia innych czynnikow. stad zaincludowanie ich w dwoch miejscach jako dwa osobne elementy to najlepsze rozwiazanie. a co do pozycjonowanie to sidebar fixed jest jak najbardziej ok, o ile w wersji mobile nie bedzie wadzil np. tym strzalkom (lewo prawo) od slidera i przyslanial je w pewnym miejscu strony ze niemozliwe bedzie ich uzycie. ja czepialem sie koncepcji ze sidebar jest fixed i element jest dopsowywany do sicebaru i contentu za pomoca magicznych positionow i specyficznych marginow, bo choc byloby to osiagalne to wysypalo by sie na mobilnym widoku. a tak jak rozdzielilas to i ten element jest w dwoch miejscach to zlamalas jego powiazanie z dwoa elementami i uproscilas widok, mimo iz content jest zduplikowany. alo to cos jak wyobraz sobie ze logo masz na gorze strony i w pasku nawigacji, ktory chcesz by sie przewijal w dol strony. czasem lepiej jest zdublowac logo do paska nawigacji niz bawic sie w przetwarzanie loga na dwa widoki.