Forum PHP.pl > Błędne wymiary pudełka gdy absolute

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Błędne wymiary pudełka gdy absolute

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

FredzioZgredzio

27.07.2014, 20:59:23

Witam wszystkich. Mam problem z pozycjonowaniem div'ów. Mam kod:

[HTML] pobierz, plaintext 
<html>
<body>
	<div style="position: relative; height: 700px; width: 100%;">
		<div style="position: absolute; bottom: 20%; height: 17%; width: 100%;">
			<div style="position: relative; width: 40%; height: 100%;">
				<div style="position: absolute; top: -5px; padding-top: 5px; height: 100%; background: #000;">
				</div>
			</div>
		</div>
	</div>
</body>
</html>
[HTML] pobierz, plaintext

nie potrafię zrozumieć z jakiego powodu "najgłębszy" div ma wysokość 0 i szerokość wziętą z kosmosu.. po usunięciu position i top div wyświetla się poprawnie O.o
zależy mi na podniesieniu go o te 5px. proszę o pomoc

fate

28.07.2014, 10:49:55

jak chcesz go podniesc to zrob position:relative; top:-5px lub margin-top:-5px
mieszasz
jak nie ma zawartosci to go nie widać ale wysokosc trzyma a szerokosc dopasowuje do zawartosci jak ma absolute'a

FredzioZgredzio

28.07.2014, 11:22:40

z tym margin-top:-5px to całkiem dobry pomysł

dzięki

ale napisałeś, że trzyma wysokość i szerokosc dopasowuje do zawartosci. w takim razie dlaczego w narzedziu developerskim wysokosc tego pudełka jest 0 a powinno być 119px skoro jego rodzic ma tyle a samo pudełko ma height: 100%.. a skoro szerokosc dopasowuje sie do zawartosci samego pudełka to dlaczego puste pudełko ma 124px.. jego rodzic ma 634px więc też nie widze związku.
próbuję tylko zrozumiec o co tu chodzi

fate

28.07.2014, 11:55:39

Tu juz nie pomoge nie znam tych narzedzi od środka jak sa zbudowane, nie jest wykluczone że nie są pozbawione bugów, moga pojawiać się rozbieżnosci w zależnosci ktorego używasz, opisałem tylko moje spostrzeżenia, a rzeczywiście trudno doszukać się związków w sytuacji którą opisujesz

FredzioZgredzio

29.07.2014, 15:22:06

No trudno. W każdym razie dzięki za pomoc

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.