Das Attribut inclose dient dazu, relativ positionierte Elemente, innerhalb eines bestimmten Bereichs zu halten, wenn das Element, auf das sich die Positionierung bezieht, bewegt wird bzw. die relative Positionsangabe zu einer Überlappung führt. In diesem Beispiel, ist dieser Bereich der "Rahmen" des Beispiels resp. das "Root"-Objekt der Beispiel-Applikation.

Insgesammt gibt es 5 Methoden die unterschiedlich auf "Bereichsübertretungen" reagiern:

• inclose:auto
  Verschiebt das überlappende Element, so dass es innerhalb des angegebenen Bereichs bleibt in Pixel-Schritten und indem die nächste passende relative Position angenommen wird, die innerhalb des "Rahmens" liegt. Der sichtbare Bereich des Relativen Elements wird nicht überdeckt.
• inclose:move
  Verschiebt das überlappende Element, so dass es innerhalb des angegebenen Bereichs bleibt in Pixel-Schritten
• inclose:walk
  Verschiebt das überlappende Element, so dass es innerhalb des angegebenen Bereichs bleibt, indem die nächste passende relative Position angenommen wird, die innerhalb des "Rahmens" liegt. Aus einer relativen Positionierung: "rechte Seite relativ zur linken Seite" (z.B. right:'parentLeft' oder right:'elementLeft') wird: "linke Seite relativ zur linken Seite" wenn die linke Seite des "Rahmens" überschritten würde.
• inclose:step
  Verschiebt das überlappende Element, so dass es innerhalb des angegebenen Bereichs liegt, indem die nächste passende relative Position angenommen wird, die innerhalb des "Rahmens" liegt. Aus einer relativen Positionierung: "rechte Seite relativ zur linken Seite" (z.B. right:'parentLeft' oder right:'elementLeft') wird: "linke Seite relativ zur linken Seite" wenn die linke Seite des "Rahmens" überschritten würde. Im Gegensatz zu inclose:'walk' findet hier nur "ein Schritt" statt. Zusätzlich machen relativ zentrierte Elemente, einen Sprung zu einer Position außerhalb des Elements, zu dem sie relativ positioniert sind.
• inclose:jump
  Hier ist die Auswahl der möglichen Positionen nocheinmal reduziert. Alle "Ausweichpositionen", liegen außerhlab des Elements zu dem das Element relativ positioniert ist. Dies dient dazu, die visuellen Informationen des Elements, auf das sich die Positionierung bezieht, nicht zu verdecken.

Die Attribute inclose und incloseBy können innerhalb eines Größen-Objektes, oder innerhlab eines "Attribut-Objektes" gesetzt werden.

Für inclosBy existieren 5 mögliche Werte:

• incloseBy:"parent"
  Der Rahmen ist das Eltern-Element des positionierten Elements.
• incloseBy:"root"
  Der Rahmen ist das Root-Objekt der Web-Applikation.
• incloseBy:"rootElement"
  Der Rahmen ist der Container der Web-Applikation.
• incloseBy:"window"
  Der Rahmen ist das Browser-Fenster (default).
• incloseBy:"element"
  Der Rahmen ist ein Element des gleichen Objektes, in dem sich das zu positionierende Element befindet.

Die originalen Positions-Angaben werden nicht verändert, das positionierte Element wird also immer die angegebene Position einnehmen, wenn der zur Verfügung stehende Platz dafür ausreicht.

Das blaue Rechteck kann mit der Maus verschoben werden. In diesem Beispiel wird demonstriert, wie die Einstellung inclose:auto mit nicht ausreichendem Platz umgeht, der duch die Begrenzung eingeschränkt wurde. Die Angaben width:inclose und width:inclose sind ein Ersatz für die Angabe "auto" und sind notwendig eine prinzipelle Lücke in den W3C Empfehlunegn zu stopfen bzw. eine Lücke in den Browser-Implementierungen zu beheben.

Die Einzelnen Browser zeigen bei diesem Beispiel unterschiedliches Verhalten. Zur Zeit ist es mit nur gelungen, diese Verhaltensweisen für Menus unter einen Hut zu bekommen. Zu einem späteren Zeitpunkt werde ich versuchen, eingedenk der ehrer seltenen (sinnvollen) Nutzung, hier konsistentes Verhalten durch browserspezifische Anpassungen herzustellen. Zur Zeit existiert nur ein Fix für den Internet Explorer, der Probleme bei der Darstellung von übergroßen Menus behebt. Dies ist notwendig, da der Internet Explorer, Scrollbalken bei positionierten Elementen mit width:auto bzw. height:auto - unsinniger Weise - nach innen verlegt und dadurch Content überdeckt. Chrome und Opera, stellen in einem kleinen Bereich beide Scrollbalken dar, dies ist nicht unbedingt falsch - nur unnötig - und führt auch dazu, das Content überdeckt wird (welcher natürlich durch Scrollen sichtbar gemacht werden kann. Der von mir benutzte Fix für den Internet Explorer, führt zur Zeit, zu einem "Zittern" der Darstellung in diesem Bereich.

Beispiel:

Skript:

	app.newClass("positionDemo","movedock",function(param,app,superClass){
	
		this.classType="positionDemo"

		this.nonPrototype=function(param,$this$)
		{
			return {
				sizes:{
					left_left_top_top:{left:"parentLeft",top:"parentTop",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,left_left_top_center:{left:"parentLeft",top:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,left_left_top_bottom:{left:"parentLeft",top:"parentBottom",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,left_right_top_top:{left:"parentRight",top:"parentTop",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,left_right_top_center:{left:"parentRight",top:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,left_right_top_bottom:{left:"parentRight",top:"parentBottom",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,top_top_right_right:{top:"parentTop",right:"parentRight",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,top_top_right_center:{top:"parentTop",right:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,top_top_right_left:{top:"parentTop",right:"parentLeft",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,top_bottom_right_right:{top:"parentBottom",right:"parentRight",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,top_bottom_right_center:{top:"parentBottom",right:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,top_bottom_right_left:{top:"parentBottom",right:"parentLeft",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,top_bottom_left_left:{top:"parentBottom",left:"parentLeft",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}

					,right_right_bottom_bottom:{right:"parentRight",bottom:"parentBottom",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,right_right_bottom_center:{right:"parentRight",bottom:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,right_right_bottom_top:{right:"parentRight",bottom:"parentTop",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,right_left_bottom_bottom:{right:"parentLeft",bottom:"parentBottom",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,right_left_bottom_center:{right:"parentLeft",bottom:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,right_left_bottom_top:{right:"parentLeft",bottom:"parentTop",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,bottom_bottom_left_left:{bottom:"parentBottom",left:"parentLeft",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,bottom_bottom_left_center:{bottom:"parentBottom",left:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,bottom_bottom_left_right:{bottom:"parentBottom",left:"parentRight",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					
					,bottom_top_left_left:{bottom:"parentTop",left:"parentLeft",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,bottom_top_left_center:{bottom:"parentTop",left:"parentCenter",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}
					,bottom_top_left_right:{bottom:"parentTop",left:"parentRight",width:"auto",height:"auto",position:"absolute",inclose:"auto",incloseBy:"root"}

					,inner:{width:"inclose",height:"inclose",scroll:true}
				}
				,move:{}
				}
		}
		
		this.bodyOpenHTML=function(param,$this$)
		{
			return [
				
				/* bad *///{tagName:"div",id:"left_left_top_top",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:left<BR>top:top"]}]}]} 
				/* bad *///,{tagName:"div",id:"left_left_top_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:left<BR>top:center"]}]}]}
				/* ok *///,{tagName:"div",id:"left_left_top_bottom",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:left<BR>top:bottom"]}]}]}
				/* ok */,{tagName:"div",id:"left_right_top_top",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:right<BR>top:top"]}]}]}
				/* ok *///,{tagName:"div",id:"left_right_top_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:right<BR>top:center"]}]}]}
				/* ok *///,{tagName:"div",id:"left_right_top_bottom",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["left:right<BR>top:bottom"]}]}]}
				
				/* bad both *///,{tagName:"div",id:"top_top_right_right",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:top<BR>right:right"]}]}]}
				/* bad both *///,{tagName:"div",id:"top_top_right_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:top<BR>right:center"]}]}]}
				/* ok *///,{tagName:"div",id:"top_top_right_left",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:top<BR>right:left"]}]}]}
				/* ok *///,{tagName:"div",id:"top_bottom_right_right",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:bottom<BR>right:right"]}]}]}
				/* ok *///,{tagName:"div",id:"top_bottom_right_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:bottom<BR>right:center"]}]}]}
				/* ok *///,{tagName:"div",id:"top_bottom_right_left",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:bottom<BR>right:left"]}]}]}

				/* ok */,{tagName:"div",id:"top_bottom_left_left",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["top:bottom<BR>left:left"]}]}]}
				
				/* bad both *///,{tagName:"div",id:"right_right_bottom_bottom",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:right<BR>bottom:bottom"]}]}]}
				/* bad both *///,{tagName:"div",id:"right_right_bottom_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:right<BR>bottom:center"]}]}]}
				/* ok *///,{tagName:"div",id:"right_right_bottom_top",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:right<BR>bottom:top"]}]}]}
				/* ok *///,{tagName:"div",id:"right_left_bottom_bottom",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:left<BR>bottom:bottom"]}]}]}
				/* ok *///,{tagName:"div",id:"right_left_bottom_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:left<BR>bottom:center"]}]}]}
				/* ok *///,{tagName:"div",id:"right_left_bottom_top",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["right:left<BR>bottom:top"]}]}]}
				/* bad both *///,{tagName:"div",id:"bottom_bottom_left_left",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:bottom<BR>left:left"]}]}]}
				/* bad both *///,{tagName:"div",id:"bottom_bottom_left_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:bottom<BR>left:center"]}]}]}
				/* ok *///,{tagName:"div",id:"bottom_bottom_left_right",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:bottom<BR>left:right"]}]}]}
				/* ok *///,{tagName:"div",id:"bottom_top_left_left",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:top<BR>left:left"]}]}]}
				/* ok *///,{tagName:"div",id:"bottom_top_left_center",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:top<BR>left:center"]}]}]}
				/* ok *///,{tagName:"div",id:"bottom_top_left_right",className:"border",children:[{tagName:"div",$id$:"inner",children:[{tagName:"div",$id$:"sizer",children:["bottom:top<BR>left:right"]}]}]}
				
			];
		}
	})

	app.newObject("positionDemo",{
		size:{top:"parentCenter",left:"parentCenter",width:"300",height:"200",position:"absolute"}
	})
	

CSS:

	.app-sizer
	{
		margin:2px;
		width:400px;
		height:400px;
		border:1px solid blue;
	}


	.app-inner
	{
		border:2px solid #cccccc;
		margin:5px;
	}

	.app-positionDemo
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 2px solid #cccccc;
		background-color: #ffffff;
	}

	.app-border
	{
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border: 2px solid #cccccc;
		background-color: #ffffff;
		opacity: .7;
	}

	.app-positionDemo .app-content
	{
		background-color: steelblue;
	}