Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html]Position: absolute > parent overflow: hidden
Forum PHP.pl > Forum > Przedszkole
szmerak
Witam mam problem z pozycją absolutną...

  1. .text-description { width: 800px; height: 400px; position: absolute; background: #000000; z-index: 100000; }
  2. <div style='overflow: hidden; width: 300px; height: 300px;'>
  3. <div class='text-description'>asdasd</div>
  4. </div>


Div jest w innym divie z overflow: hidden. I problem polega na tym że div jest ucięty do długości i szerokości rodzica... a chciał bym aby się nałożył na niego.
Z góry mówię że nie moge zrezygnować z overflowa ponieważ wtedy parent nie będzie się rozciągał pod jego dzieci...

Proszę o wskazówki..
CuteOne
z absolutem(oczywiście bezalkoholowym tongue.gif) warto podawać top i left smile.gif na necie jest sporo poradników jak z tego prawidłowo korzystać
szmerak
Nie zrozumiałeś mnie o co mi chodzi smile.gif
Postaram się lepiej wytłumaczyć..

Mam diva który ma "width: 300px; height: 300px; i overflow: hidden; position: relative"
A w nim mam jeszcze pare divów relatiwów...
Ale jest w nim jeden z pozycją absolutną, topem, leftem
Top i left jest ustawiany przez js. A dokładniej to zalezy od pozycji kursora...
Jest to div który po najechaniu na tytuł w głównym divie ma się pokazać jako dymek... z informacjami...

I problem jest w tym że główny div ma 300px; i 300px; i jak ten dymek czyli div z absolutem... dam na rozmiary width: 500px; i height: 500px; To reszta czyli 200px po obu stronach zostaje schowana... a chciał bym aby ten div był "totalnie absolutny" nie zależny od niczego i wyświetlany ponad wszystko chodzi mi o coś w stylu "z-index"...

Mam nadzieje że rozumiesz o co mi chodzi...
Pozdrawiam...

EDIT: i jeszcze ważne może być to gdy usunę overflow z głównego diva wszystko jest w porządku ale wtedy jest nierozciągniety do tekstu
zegarek84
daj przykład live lub pełny skrócony kod html przykładu tutaj ze wszystkim co konieczne żeby kliknąć tylko "html" (pobierz) i mieć jak na dłoni...

z overflow: hidden musisz zrezygnować... wychodzi na to, że na szerokość ma Ci się rozciągać... daj przykład live gdyż nie chce mi się bawić w ciemno (jak i reszcie)... daj display: block to na pewno, potem ustaw width lub min-width...

lub drugie rozwiązanie by nie rezygnować z overflow hidden to zrób wrapera na tego div'a z pozycjonowaniem relatywnym i w nim zamieść tego div'a z overflow hidden i tego pozycjonowanego absolutnie, by nie korzystać z z-index to ten co ma być na wierzchu w kodzie ma być ostatni, ten co ma być tłem innego w kodzie ma być wyżej - w przeciwnym razie musisz skorzystać jeszcze z z-index...
szmerak
  1. .m-box { width: 450px; position: relative; clear: both; width: auto; height: auto; margin-bottom: 5px; overflow: hidden; display: block; }
  2. .m-box-content { margin: 0 3px; position: relative; overflow: hidden; display: block; }
  3. .txt-description { width: 300px; height: 200px; background: #000000; position: absolute; display: none; z-index: 10000; top: 0; left: 0; }

Jak widać próbowałem różnych kombinacji ale nic nie pomaga...

  1. <div class='m-box'>
  2. <div class='m-box-title'>Title boxa <div class='move1'><img src='img/move.gif'></div></div>
  3. <div class='m-box-content'>
  4. <ul class='links' id='txt'>
  5. <li>
  6. <a href='#'>One</a> > <a href='#' class='display'>Opis</a> <- po najechaniu na opis
  7. <div class='text-description'>asdasd</div> <- powinien pokazywać się ten div a left i top jest ustawiane przez JS
  8. </li>
  9. <li>
  10. <a href='#'>Chop Suey</a> > <a href='#' class='display'>Opis</a>
  11. <div class='text-description'>asdasd</div>
  12. </li>
  13. </ul>
  14. <ul class='last-link'>
  15. <li><a href='#'>Przejdz na teksty >></a></li>
  16. </ul>
  17. </div>
  18. </div>
  19. </div>


Ma być taki efekt obrazowo

  1. +------------[m-box]--------------+
  2. | m-title | <- TEN DIV MA SiĘ ROZCIĄGAĆ
  3. | +---------m-content--------+ |
  4. | | | |
  5. | | | |
  6. | | +-------------------+
  7. | +------------------| | <- a ten ma być zrobiony w m-content i aby mógł wyjść poza m-box...
  8. +---------------------| | a nie chowało go wyświetlając tylko część mieszczącą się w m-boxie...
  9. | text-description | i przedewszystkim wyświetlało go jak najwyżej tak aby nic nad nim nie było!
  10. | |
  11. +-------------------+
zegarek84
chodzi mi o zagniezdrzenie typu:
Kod
<div class="wrapper" style="margin:0px; padding:0px; position:relative;">
<div class="m-content"></div>
<div class="text-description"></div>
</div>

ale to jeśli nie chcesz rezygnować z overflow...

poza tym dokładniej nie wiem, czy komuś będzie się chciało rozpisywać skoro nie dajesz kodu live... jeśli zrozumiałeś co piszę to spróbuj tej struktury...

edit

chodzi o technikę jak z transparentnym tłem a normalnym tekstem bez RGBa - pierwszy lepszy przykład z google:
http://kiveo.net/blog/transparent-backgrounds/
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.