Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z position absolute
Forum PHP.pl > Forum > Po stronie przeglądarki
piotr485
Witam, robię logo składające się z dwóch divów, jako tło służy slideshow zmieniający się, a u góry jest nazwa obiektu czyli logo główne w tym przypadku z-index:2;

Logo się dostosowuje do szerokości strony to o co mi chodziło, ale problem pojawia się z następnymi divami które są pod dużym logiem - po prostu nie wyświetlają się pod spodem tylko na samej górze, a nie mogę dla nich użyć parametru position absolute i top ponieważ nie znam wysokości z racji, że wysokość loga się dopasowuje do szerokości strony.

Czy ktoś wie jak rozwiązać ten problem?

Z góry dziękuję

  1. <div style="width: 100%;">
  2. <div style="position:absolute; width: 33%; z-index: 2;"><img src="images/home.jpg" style="width: 100%;"></div>
  3.  
  4. <div id="imageContainer" style="width: 100%; z-index:1; top:0; position:absolute;">
  5. <img src="images/slideshow1.jpg" style="width: 100%;">
  6. <img src="images/slideshow2.jpg" style="width: 100%">
  7. </div>
  8. </div>
  9.  
  10.  
  11. <div style="color: red; font-size: 20px;">tutaj coś dalej tutaj coś dalej tutaj coś dalej</div>
  12.  
  13.  
trueblue
Które to divy pod logiem?
Wklej działający przykład z obrazkami tu: https://jsfiddle.net/
piotr485
Cytat(trueblue @ 15.05.2016, 11:32:24 ) *
Które to divy pod logiem?
Wklej działający przykład z obrazkami tu: https://jsfiddle.net/


to jest logo:
  1. <div style="width: 100%;">
  2. <div style="position:absolute; width: 33%; z-index: 2;"><img src="images/home.jpg" style="width: 100%;"></div>
  3.  
  4. <div id="imageContainer" style="width: 100%; z-index:1; top:0; position:absolute;">
  5. <img src="images/slideshow1.jpg" style="width: 100%;">
  6. <img src="images/slideshow2.jpg" style="width: 100%">
  7. </div>
  8. </div>


a to jest pod logiem:
  1. <div style="color: red; font-size: 20px;">tutaj coś dalej tutaj coś dalej tutaj coś dalej</div>

trueblue
Dobrze, że wkleiłeś działający kod na jsfiddle.


https://jsfiddle.net/Lu8x328y/

Obrazek ma aspect ratio 2:1, ale zajmuje 33% szerokości diva nadrzędnego, więc div nadrzędny ma padding-top 50%/3=16.66666%

Więcej o aspect ratio w css: http://stackoverflow.com/questions/1495407...-a-div-with-css
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.