Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Chowanie diva pod innego diva
Forum PHP.pl > Forum > Przedszkole
edej
Co może być nie tak, że DIV, którego chcę schować przy użyciu jquery.animate(); nie chowa się pod lewą stronę strony (.left_column) ?

Kod:

  1. #slider_frame {
  2. float: left;
  3. position: relative;
  4. z-index: 2;
  5. width: 310px;
  6. height: 545px;
  7. background: #111;
  8. padding: 20px;
  9. opacity: 0.5;
  10. }
  11.  
  12. .left_column {
  13. float: left;
  14. width: 210px;
  15. padding: 18px;
  16. position: relative;
  17. z-index: 2;
  18. }


Kod JS:
  1. $('#close_slider_frame').click(function(){
  2. var current = $('#slider_frame p[align="right"]').text();
  3. if (current == 'Zamknij') {
  4. $('#slider_frame').stop(true,false).animate({
  5. left: '-=262'
  6. }, 1500, function(){
  7. $('#slider_frame p[align="right"]').text('Otwórz');
  8. });
  9. }
  10. else {
  11. $('#slider_frame').stop(true,false).animate({
  12. left: '+=262'
  13. }, 1500, function(){
  14. $('#slider_frame p[align="right"]').text('Zamknij');
  15. });
  16. }
  17. });

Animacja działa, ale zakrywa mi lewą stronę, a ma się chować pod nią.
mar1aczi
z-index?
Gość
Tak, tylko szkoda że nie zauważyłeś że tak właśnie mam...
Gość
http://jsbin.com/esedos/1
mar1aczi
Cytat(Gość @ 15.03.2013, 14:29:54 ) *
Tak, tylko szkoda że nie zauważyłeś że tak właśnie mam...

I jakie mają wartości?
Gość
No chyba dobre - lewa kolumna ma z-index: 3, a #slider_frame z-index: 2...
mar1aczi
close_slider_frame ma z-index=3, ale ten z kolei jest w slider_frame o z-index=2, czyli na tej samej warstwie co left_colum

Hehe, widzę, że już załapałeś bo w kodzie poprawiłeś.
Gość
Zmiana planów - jednak się chowa, ale tam tła nie ma i dlatego tak to wygląda biggrin.gif

Jest na to jakiś sposób, żeby ucięło X px od lewej strony? bo teraz nawet jak dodałem TŁO do left column to i tak kawałek wystaje ;/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.