GoldenLine
Zaloguj się

konto usunięte

Temat: Pokrywajace się obrazy

Witam,

mam w tabeli dwa pliki graficzne jeden pod drugim. Za pomoca CSS przesuwam drugi w gore o 150 px, tak by się pokrywały. Niestety w tabeli nadal jest zarezerwowane miejsce na przesunięty drugi obrazek.



            .fade1 {

                position: relative;

            }



            .fade2 {

                position: relative;

                top: -150px; # taka jest wysokość obrazka



...



<div class="fade1">

      <img src="0.jpg" >

</div>

<div class="fade2">

      <img src="1.jpg" >

</div>


Co mogę zrobić by wolne miejsce po drugim obrazku nie pojawiało się w tabeli?
Link do wypowiedziLink

konto usunięte

Temat: Pokrywajace się obrazy

spróbuj zadeklarować jeszcze wysokość i szerokość div'ów
Link do wypowiedziLink

konto usunięte

Temat: Pokrywajace się obrazy

Pozycjonowanie relatywne zostaw tylko na potrzeby ustawienia porządku elementów w stosie (z-index) - przesuniecie w górę zrób za pomocą właściwości 'margin-top', a nie 'top'.

Pozycjonowanie relatywne przesuwa dany element względem granic tego elementu, a nie względem jego otoczenia - dlatego jak sam napisałeś "nadal jest zarezerwowane miejsce na przesunięty drugi obrazek"...
Link do wypowiedziLink

konto usunięte

Temat: Pokrywajace się obrazy

Waldek Mazurek:
Pozycjonowanie relatywne zostaw tylko na potrzeby ustawienia porządku elementów w stosie (z-index)

Chyba, że zawsze nakrywasz niższym (w sensie niżej w kodzie) elementem ten wyższy. Wtedy obejdzie się bez relative-a.
Link do wypowiedziLink

konto usunięte

Temat: Pokrywajace się obrazy

rafał krupiński:
Chyba, że zawsze nakrywasz niższym (w sensie niżej w kodzie) elementem ten wyższy. Wtedy obejdzie się bez relative-a.

Celna uwaga - dzięki za uzupełnienie mojej wypowiedzi.
Link do wypowiedziLink
Artur Kwiatkowski

Artur Kwiatkowski Front-end developer

Temat: Pokrywajace się obrazy

Czasem jeszcze można by się pokusić o takie rozwiązanie:

Wsadzamy oba obrazki w jeden relatywny kontener, który ma zadeklarowane rozmiary. Obrazkom nadajemy klasy i pozycjonujemy je przez css, czyli to by było z palca mniej więcej tak:



<div id="frame">

<img src="1.jpg" alt="" class="first" width="300" height="300" />

<img src="2.jpg alt="" class="second" width="300" height="300" />

</div>






#frame {position:relative;height:450px;width:300px;}

#frame .first {position:absolute;top:0;left:0;z-index:5;}

#frame .second {position:absolute;top:150px;left:0;z-index:10;}


I wtedy tak na moje oko to drugi obrazek będzie przykrywał pierwszy - pierwszego będzie 150px widoczne natomiast drugi będzie cały.

Niestety to rozwiązanie jest nie elastyczne - zawsze będzie trzeba zmienić height #frame'a w wypadku gdy np. obrazków miało by być więcej.

Można by spróbować zrobić to tak: wsadzamy oba obrazki w kontener, obrazki definiujemy jako relative - na każdy nastawiamy: margin-top:-150px; natomiast na #kontener img:first-child {margin:0;} - tylko przy takim rozwiązaniu musiałbyś sobie przez jquery narzucać z-indexy poprzez jakiś autoincrement.
Link do wypowiedziLink

konto usunięte

Temat: Pokrywajace się obrazy

Dziekuje za pomoc :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj