Forum PHP.pl > [HTML/CSS] Pozycja diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

loonger

7.09.2006, 13:30:59

czy mozna ustawic styl diva tak, aby pozycja okreslona parametrami top i left nie byla okreslana wzgledem okna tylko wzgledem innego diva?

mike

7.09.2006, 13:38:53

Tak. Można.

Jest to pozycjonowanie absolutne względem rodzica pozycjonowanego relatywnie.

[HTML] pobierz, plaintext 
<div style="position: relative; margin: auto; width: 200px; height: 300px; background-color: #f00;">
  <div style="position: absolute; top: 20px; left: 10px; width: 40px; height: 35px; background-color: #0f0;"></div>
</div>
[HTML] pobierz, plaintext

loonger

7.09.2006, 15:29:10

a nie powinno byc odwrotnie? tzn tak, ze zewnetrzny div ma position:absolute, a wewnetrzny position:relative?

mike

7.09.2006, 15:34:34

A sprawdziłeś to co podałem ?

Czerwony div jest ustawiany jak chcesz, może pływać lub może być wyśrodkowany (tak jak obecnie).
Zielony div, który jest w środku ustawiany jest (za pomocą top, left) względem narożnika czerwonego diva a nie względem narożnika okna.

Czyli to o co pytałeś.

loonger

7.09.2006, 15:45:42

Cytat(mike_mech @ 7.09.2006, 16:34:34 )

Czerwony div jest ustawiany jak chcesz, może pływać lub może być wyśrodkowany (tak jak obecnie).

a jednak nie

[HTML] pobierz, plaintext 
<div style="position: relative; top: 0px; left: 0px; width: 200px; height: 300px; background-color: #f00;">
[HTML] pobierz, plaintext

ale div wcale nie pokazuje sie w lewym gornym rogu tylko jest troche przesuniety. czemu?

mike

7.09.2006, 15:52:27

Cytat(loonger @ 7.09.2006, 16:45:42 )

a jednak nie

[HTML] pobierz, plaintext 
<div style="position: relative; top: 0px; left: 0px; width: 200px; height: 300px; background-color: #f00;">
[HTML] pobierz, plaintext

ale div wcale nie pokazuje sie w lewym gornym rogu tylko jest troche przesuniety. czemu?

Nie przez diva, tylko przez to że zapomniałeś o .... body.
Dodaj na początku:

[HTML] pobierz, plaintext 
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
</style>
[HTML] pobierz, plaintext

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.