[html]Position: absolute > parent overflow: hidden Opcje

[szmerak]

Witam mam problem z pozycją absolutną...

[HTML] pobierz, plaintext 
.text-description { width: 800px; height: 400px; position: absolute; background: #000000; z-index: 100000; }
<div style='overflow: hidden; width: 300px; height: 300px;'>
<div class='text-description'>asdasd</div>
</div>
[HTML] pobierz, plaintext 

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 ) warto podawać top i left na necie jest sporo poradników jak z tego prawidłowo korzystać

[szmerak]

Nie zrozumiałeś mnie o co mi chodzi
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

Ten post edytował szmerak 14.12.2011, 07:51:37

[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...

Ten post edytował zegarek84 14.12.2011, 10:44:37

[szmerak]

[HTML] pobierz, plaintext 
.m-box { width: 450px; position: relative; clear: both; width: auto; height: auto; margin-bottom: 5px; overflow: hidden; display: block; }
.m-box-content { margin: 0 3px; position: relative; overflow: hidden; display: block;  }
.txt-description { width: 300px; height: 200px; background: #000000; position: absolute; display: none; z-index: 10000; top: 0; left: 0; }
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<div class='m-box'>
<div class='m-box-title'>Title boxa <div class='move1'><img src='img/move.gif'></div></div>
<div class='m-box-content'>
<ul class='links' id='txt'>
<li>
<a href='#'>One</a> > <a href='#' class='display'>Opis</a> <- po najechaniu na opis
<div class='text-description'>asdasd</div> <- powinien pokazywać się ten div a left i top jest ustawiane przez JS
</li>
<li>
<a href='#'>Chop Suey</a> > <a href='#' class='display'>Opis</a>
<div class='text-description'>asdasd</div>
</li>
</ul>
<ul class='last-link'>
<li><a href='#'>Przejdz na teksty >></a></li>
</ul>
</div>
</div>
</div>
[HTML] pobierz, plaintext 

Ma być taki efekt obrazowo

[PHP] pobierz, plaintext 
+------------[m-box]--------------+
|            m-title              | <- TEN DIV MA SiĘ ROZCIĄGAĆ 
|  +---------m-content--------+   |
|  |                          |   | 
|  |                          |   | 
|  |                  +-------------------+
|  +------------------|                   | <- a ten ma być zrobiony w m-content i aby mógł wyjść poza m-box... 
+---------------------|                   | a nie chowało go wyświetlając tylko część mieszczącą się w m-boxie... 
                      |  text-description | i przedewszystkim wyświetlało go jak najwyżej tak aby nic nad nim nie było!
                      |                   |
                      +-------------------+
[PHP] pobierz, plaintext 

Ten post edytował szmerak 14.12.2011, 12:55:49

[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/

Ten post edytował zegarek84 14.12.2011, 13:10:28