Avatar billede rbl Praktikant
08. december 2006 - 09:51 Der er 7 kommentarer og
1 løsning

Problemer med position:relative

Hej

Jeg forsøger at lave et alternativ til Windows grimme stadard popup. Det gør jeg med en div, som jeg styler.

Popup'en skal positioneres i forhold til den knap man trykker på. Derfor bruger jeg position:relative. Problemet er bare, at når popup'en bliver vist, så skubber den alt andet indhold.

Hvordan undgår jeg det ?

Jeg har ledt efter en løsning, men kan det virkelig passe, at det ikke kan undgås?  Eller er der andre løsninger til dette problem ?

Mvh
Rasmus
Avatar billede jokkejensen Novice
08. december 2006 - 10:11 #1
sig position:absolute;top: xx_px; left: xx_px; på divet..

hvor top og left, er udfra elemententet med position:relative.

/JJ
Avatar billede sw_red_6 Nybegynder
08. december 2006 - 10:12 #2
Du kunne også prøve at lege lidt med z-index
Avatar billede olebole Juniormester
08. december 2006 - 10:13 #3
<ole>

Du skal bruge 'position:absolute'. Positionen på elementet (knappen) får du så med funktionen:

function getPos(elm) {
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}
function myMove2(id, o) {
    var pos = getPos(o),
    css = document.getElementById(id).style;
    css.left = pos.x + "px";
    css.top = (pos.y + o.offsetHeight) + "px";
}

<button onclick="myMove2('gnu',this)">TEST</button>

<div id="gnu">En tekst i et div</div>

/mvh
</bole>
Avatar billede olebole Juniormester
08. december 2006 - 10:16 #4
- og du kan også:

function myMove2(id, o) {
    var css = document.getElementById(id).style;
    css.left = o.offsetLeft + "px";
    css.top = o.offsetHeight + "px";
    css.display = "block";
}

<div style="position:relative">
  <button onclick="myMove2('gnu',this)">TEST</button>
  <div id="gnu" style="position:absolute;display:none">En tekst i et div</div>
</div>
Avatar billede rbl Praktikant
08. december 2006 - 13:42 #5
olebole -> Det virker jo fint :-)

Læg et svar, så får du pointene.
Avatar billede olebole Juniormester
08. december 2006 - 14:01 #6
Et svar  ;o)
Avatar billede rbl Praktikant
08. december 2006 - 15:51 #7
Tak for det
Avatar billede olebole Juniormester
08. december 2006 - 15:56 #8
- og tak for points  :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester