Sign In
Create Account
CSS z-index si position asbsolute
Last Updated: Jan 05 2012 15:49, Started by
trackback
, Jan 05 2012 12:12
·
0
0
#1
Posted 05 January 2012 - 12:12
|
Am div1 in interiorul caruia se afla div2.
div1 are position: relative z-index: 1 si height: 50px, iar div2 are height: 300px si position: absolute,pentru ca trebuie sa il mut in dreapta lui div1 (e vorba despre un meniu). Acum vreau ca bordura din dreapta (50px white) a lui div1 sa vina peste bordura din stanga a lui div2 (300px black) pentru a se suprapune si a da senzatia ca pe cele 2 div-uri nu le separa nimic. Asa ca i-am pus lui div2 un z-index mai mare. Insa nu functioneaza pentru ca div1 va ramane tot sub div2. Aveti alte idei cum sa scot div2 in afara lui div1 si div1 sa fie deasupra lui div2 ca si ordine ? |
Back to top
#2
Posted 05 January 2012 - 12:27
|
Nu știu cât am înțeles, dar zici că div2 e în dreapta div-ului 1, așa că de ce nu folosești un tabel ?
Dacă vrei totuși să o ți pe varianta asta cu div-urile, pune și un cod și îți găsesc o variantă. |
#3
Posted 05 January 2012 - 12:38
|
Ok nu m-am exprimat chiar bine. Deci vreau sa realizez un meniu ca asta: http://www.emag.ro/ .
div1 este o categorie din meniu iar div2 este div-ul ce apare in dreapta cand pui mouse-ul pe div1. Astfel div2 trebuie sa fie in interiorul lui div1 pentru a se pastra event-ul hover si a nu se inchide meniul cand te duci cu mouse-ul pe div2. div2 are la inceput display: none iar cand pun mouse-ul pe div1 i se va atribui display: inline. Pentru a aparea in dreapta, div2 trebuie sa aiba position asolute, iar pentru a ramane pe acelasi loc la mouseover pe fiecare div1, ii trebuie top: 0px si left: 200px. Nu pot face cu tabele pentru ca ce se va afisa in dreapta nu va ramane pe acelasi loc pentru fiecare categorie din meniu.
#div0{
width: 200px;
float: left;
}
.div1 {
position: relative;
height: 30px;
width: 200px;
border-right: 2px solid #fff;
z-index: 100;
}
.div2{
display: none;
position: absolute;
width: 700px;
min-height: 200px;
top: 0px;
left: 200px;
border: 1px solid black;
z-index: 1;
}
<body>
<div id='div0'> <!-- contine intreg meniul -->
<div class='div1'>
Categora1
<div class='div2'>
Mii de subcategorii si produse
</div>
</div>
<div class='div1'>
Categoria2
<div class='div2'>
Mii de subcategorii si produse
</div>
</div>
<div class='div1'>
Categoria3
<div class='div2'>
Mii de subcategorii si produse
</div>
</div>
</div>
</body>
Edited by trackback, 05 January 2012 - 12:49. |
#4
Posted 05 January 2012 - 13:20
|
Meniul de pe emag foloseste hoverIntent pentru a rezolva problema "pentru a se pastra event-ul hover si a nu se inchide meniul cand te duci cu mouse-ul pe div2".
Problema asta nu se rezolva cum crezi tu. 1) Daca ai <div><span>qqq</span></div> si ai mouseover si mouseout pe div, mouseout o sa se declanseze in momentul in care duci pointer-ul peste span. Uita-te pe pagina hoverIntent si o sa gasesti in exemple "hover ignores over/out events from children". Cum anume functioneaza e inutil de explicat aici. Uita-te prin sursele hoverIntent si iti dai seama cum poti implementa singur asa ceva. 2) Nu intelegi cum functioneaza z-index. z-index-urile sunt relative la parinte, adica fii unui element o sa fie intotdeauna deasupra acestuia. Nu poti sa suprapui div1 peste div2. Defapt tu nici nu vrei asta. Tu vrei ca "butonul" pe care scrie "Categora1" sa fie deasupra lui div2. Pune "Categora1" intr-un <span> cu clasa "span1" si pune tot style-ul .div1 in .span1 si span-ul o sa fie deasupra div-ului. |
#5
Posted 05 January 2012 - 13:58
|
sergiu_spooky, on 5th January 2012, 13:20, said: Problema asta nu se rezolva cum crezi tu. 1) Daca ai <div><span>qqq</span></div> si ai mouseover si mouseout pe div, mouseout o sa se declanseze in momentul in care duci pointer-ul peste span. Functiile mouseover , mouseout sau hover din jQuery fac aceeasi treaba cu hoverIntent. Si anume nu se declanseaza mouseout-ul pe div1 decat daca duc pointer-ul pe un tag din afara lui div1. |
#6
Posted 05 January 2012 - 13:59
|
Ia vezi așa (verificat doar în firefox) :
<style>
#menu {width:300px; background:yellow; overflow:hidden;}
#menu:hover {width:100%;}
#menu div {display:inline-block;}
#menu div.left{width:300px; background:red;}
#menu div.right{width:0px; height:0px; text-align:center;}
#menu:hover div.right{overflow:visible; height:100px;}
</style>
<div id="menu">
<div class="left">Left </div>
<div class="right">Right </div>
</div>
|
#7
Posted 05 January 2012 - 14:42
|
trackback, on 5th January 2012, 13:58, said: Functiile mouseover , mouseout sau hover din jQuery fac aceeasi treaba cu hoverIntent. Si anume nu se declanseaza mouseout-ul pe div1 decat daca duc pointer-ul pe un tag din afara lui div1. Poate te referi la mouseenter si mouseleave, sau poate folosesti stopPropagation. Citeste articolul astaca sa te lamuresti. |
#8
Posted 05 January 2012 - 15:15
|
La mine nu se executa mouseout pentru div1 daca trec in dreapta pe div2 , div2 fiind in div1.
Ok, problema mea nu este cu hover-ul. Eu am dat exemplul de pe eMag, cum se imbina div-ul mare din dreapta cu o categorie din meniul din stanga. Asta nu reusesc eu sa fac. Sa fie border-ul din dreapta al unui item din meniu, peste borderul din stanga al div-ului mare cu subcategorii si produse. |
1000 x beri
Anunturi
Bun venit pe Forumul Softpedia!
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.