[css] style.left / top absolute positioneren tov page - Softwareontwikkeling

zaterdag 10 juni 2006 16:20

Acties:

Verwijderd

Topicstarter

Ik zit met het probleem dat ik een div element heb die zich binnen een tamelijk complexe nesting van andere div elementen bevind.

Via een Javascript wil ik dit element naar een willekeurige plek op het scherm verplaatsen. Echter, als ik via script als el.style.top='0x' en el.style.left='0x' dat probeer te doen, dan verschijnt het element in de linker boven hoek van de ruimte die door het parent div element omsloten wordt. De positioning van het div element in kwestie staat op absolute.

Nu is hier opzich wel met wat truukjes om heen te werken, maar ik vroeg me af of het mogelijk is om het div element ook -direct- op een positie neer te zetten die relatief is aan de gehele pagina.

Is dit mogelijk?

zaterdag 10 juni 2006 16:22

Acties:

BtM909

Watch out Guys...

De div met DOM verplaatsen naar je document als parent ipv je complex geneste div. Als je trouwens al weet dat je div over het ehele scherm verplaatst moet worden, waarom dan in de eerste instantie al in je divs stoppen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zaterdag 10 juni 2006 23:38

Acties:

Verwijderd

Topicstarter

BtM909 schreef op zaterdag 10 juni 2006 @ 16:22:
De div met DOM verplaatsen naar je document als parent ipv je complex geneste div. Als je trouwens al weet dat je div over het ehele scherm verplaatst moet worden, waarom dan in de eerste instantie al in je divs stoppen?

Dit gebeurd omdat ik een JSF component bouw, en je van te voren natuurlijk niet weet binnen welke context deze z'n code gaat genereren. Iemand zet alleen het component serverside op een page, en deze genereerd dan de uiteindelijke HTML markup. Wat iemand hierom heen zet is dus voor mijn context (als component bouwer) niet bekend.

Als heel simpel voorbeeld:

Het kan zijn:

XML:

<html>
   <body>
      <f:view>
         <h:form>
            <e:myComp binding="#{mybean}" />
         </h:form>
       </f:view>
    </body>
</html>

Maar het kan ook zijn:

XML:

<jsp:include page="complicated_nested_divs_start.jsf"/>
      <f:view>
         <h:form>
            <e:myComp binding="#{mybean}" />
         </h:form>
       </f:view>
<jsp:include page="complicated_nested_divs_end.jsf"/>

Beforehand weet ik dus nooit op welke plek mijn gegenereerde HTML zal verschijnen.

zaterdag 10 juni 2006 23:42

Acties:

crisp

Devver

Pixelated

absolute gepostioneerde elementen zijn gepositioneerd tov hun offsetParent of de body.
Een offsetParent is een containing element met position != static (dus relative of absolute).
Een of meerdere van de parent-elementen heeft dus blijkbaar een position: relative of absolute, de vraag is dan: waarom en is dat echt noodzakelijk?

Intentionally left blank

zondag 11 juni 2006 00:57

Acties:

Verwijderd

Topicstarter

crisp schreef op zaterdag 10 juni 2006 @ 23:42:
Een of meerdere van de parent-elementen heeft dus blijkbaar een position: relative of absolute, de vraag is dan: waarom en is dat echt noodzakelijk?

Dat is inderdaad een goede vraag

In de nesting van divs staat er inderdaad 1 parent bij die een position heeft (absolute). Als ik deze weghaal zie ik zo op het eerste oog nix aan de layout van de page veranderen. De nesting is echter redelijk complex en omdat ik deze niet heb gemaakt weet ik dus ook niet waarom deze noodzakelijk zou zijn.

Blijft natuurlijk het punt dat ik nu toevallig toegang heb tot de page src, maar in het algemeen weet je natuurlijk nooit waarbinnen iemand jouw component nest en of er idd redenen zijn om een parent te positioneren.