Posizione Absolute Esempio ASP

<style>

/*heading*/
h1, h2, h3, h4, h5, h6 {font-weight:bold;color:#FFF;}
h2, h3, h4, h5, h6 {font-weight:bold;color:#636;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}
h2 {font-size:130%;margin-bottom:0.75em;padding-top:0.75em;border-top:1px solid #7f192f;}
h3 {font-size:100%;line-height:1;margin-bottom:1em;font-style:italic;}
h4 { font-size:100%;line-height:1.25; margin-bottom:1.25em;}
h5 { font-size:1em;margin-bottom:1.5em;}
h6 { font-size:1em;}

/*text elements*/
dl {margin:0 1.5em;}
dt {font-weight:bold;}
dd {margin-bottom:18px;}

/* Paragrafi */
p { padding:4px 0 10px 0;line-height:20px;}
pre {background:#eaeaea;padding:20px 0px;margin:30px 0;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #d8d7d7;}
blockquote {font-style:italic;background:#d8d7d7 url('../images/quote.png') no-repeat 20px 10px;padding:30px 20px 30px 80px;margin:30px 40px;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #c1bfbf;}
span.label {font-style:italic;font-size:80%;display:block;padding:10px 0;}

/*link*/
a:link, a:visited {color:#7f192f;}
a:hover, a:active {color:#b2030b;}

/*general*/
body {background:#fbf7f7;font-family:georgia,verdana,Arial,sans-serif;}
#container {width:960px;margin:20px auto;}
p.results,dl.results, .results {background:#f6ebeb;padding:20px 15px;margin:30px 0;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #ead6d6;}
#footer {text-align:center;font-size:85%;}
img {border:none;}

.box-1 {
	width:300px;
	margin:10px;
	padding:10px;
	background:#d8d7d7;
	position:absolute;
	<% Dim Stringa , MyTopBox , MyLeftBox
if request.querystring("TopBox") = "" then
stringa = "0"
else
stringa = request.querystring("TopBox")
end if
MyTopBox = stringa
%>
    top:<%=stringa%>px;

<%  
if request.querystring("leftBox") = "" then
stringa = "0"
else
stringa = request.querystring("leftBox")
end if
MyleftBox = stringa
%>
	left:<%=stringa%>px;
}

.box-2 {
	width:490px;
	margin:10px;
	padding:30px;
	background:#d8d7d7;
	position:absolute;

top:303px;
	left:747px;
}

.Titolo {
	position:absolute;

<% dim MyTopTit , MyLeftTit
if request.querystring("Toptit") = "" then
stringa = "30"
else
stringa = request.querystring("Toptit")
end if
MyToptit = stringa
%>
    top:<%=stringa%>px;

<%  
if request.querystring("lefttit") = "" then
stringa = "286"
else
stringa = request.querystring("lefttit")
end if
Mylefttit = stringa
%>
	left:<%=stringa%>px;

z-index:3
}

</style>

</head>

<h1>CSS: utilizzo della propriet� <em>position</em></h1>
 </div>
<h2>Posizionamento standard di un elemento</h2>
 
<h3>Box contenente un paragrafo</h3>
 
<div class="box-1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat
        pharetra libero malesuada rhoncus.
    </p>
</div>

<div class="box-2">
     
       <form id="mio" action="Posiziona.asp" style="alignment-adjust: central" method="get" >
  <label >Box Top:</label> 
  <input type="text" id="TopBox" name="TopBox" value="<%=MyTopBox  %>" style="text-align: center">

<label >Box Left:</label> 
  <input type="text" id="leftBox" name="leftBox" value="<%= MyLeftBox %>" style="text-align: center"> <br /> <br />

<label >Tit. Top :</label> 
  <input type="text" id="TopTit" name="TopTit" value="<%=MyTopTit%>" style="text-align: center">

<label >Tit. Left :</label> 
  <input type="text" id="leftTit" name="leftTit" value="<%= MyLeftTit %>" style="text-align: center"> <br /><br />

<hr /> 
.box-1 {  <br />
	width:300px; <br />
	margin:10px; <br />
	padding:10px; <br />
	background:#d8d7d7; <br />
	position:absolute; <br />
    top:<%=MyTopBox%>px; <br />
	left:<%=MyleftBox%>px; <br />
}
     <br />
.Titolo { <br />
	position:absolute; <br />
    top:<%=MyToptit%>px; <br />
    left:<%=Mylefttit%>px; <br />

z-index:3 <br />
} <br />
    <hr />
 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//IT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Esempio Posizionamento</title>

<style>

/*heading*/
h1, h2, h3, h4, h5, h6 {font-weight:bold;color:#FFF;}
h2, h3, h4, h5, h6 {font-weight:bold;color:#e'6;}
h1 {font-size:150%;line-height:1;margin-bottom:0.5em;text-align:center;}
h2 {font-size:130%;margin-bottom:0.75em;padding-top:0.75em;border-top:1px solid #7f192f;}
h3 {font-size:100%;line-height:1;margin-bottom:1em;font-style:italic;}
h4 { font-size:100%;line-height:1.25; margin-bottom:1.25em;}
h5 { font-size:1em;margin-bottom:1.5em;}
h6 { font-size:1em;}

/*text elements*/
dl {margin:0 1.5em;}
dt {font-weight:bold;}
dd {margin-bottom:18px;}

/* Paragrafi */
p { padding:4px 0 10px 0;line-height:20px;}
pre {background:#eaeaea;padding:20px 0px;margin:30px 0;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #d8d7d7;}
blockquote {font-style:italic;background:#d8d7d7 url('../images/quote.png') no-repeat 20px 10px;padding:30px 20px 30px 80px;margin:30px 40px;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #c1bfbf;}
span.label {font-style:italic;font-size:80%;display:block;padding:10px 0;}

/*link*/
a:link, a:visited {color:#7f192f;}
a:hover, a:active {color:#b2030b;}

/*general*/
body {background:#fbf7f7;font-family:georgia,verdana,Arial,sans-serif;}
#container {width:960px;margin:20px auto;}
p.results,dl.results, .results {background:#f6ebeb;padding:20px 15px;margin:30px 0;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border:2px solid #ead6d6;}
#footer {text-align:center;font-size:85%;}
img {border:none;}

.box-1 {
width:300px;
margin:10px;
padding:10px;
background:#d8d7d7;
position:absolute;
<% Dim Stringa , MyTopBox , MyLeftBox
if request.querystring("TopBox") = "" then
stringa = "0"
else
stringa = request.querystring("TopBox")
end if
MyTopBox = stringa
%>
top:<%=stringa%>px;

<%
if request.querystring("leftBox") = "" then
stringa = "0"
else
stringa = request.querystring("leftBox")
end if
MyleftBox = stringa
%>
left:<%=stringa%>px;
}

.box-2 {
width:490px;
margin:10px;
padding:30px;
background:#d8d7d7;
position:absolute;

top:303px;
left:747px;
}

.Titolo {
position:absolute;

<% dim MyTopTit , MyLeftTit
if request.querystring("Toptit") = "" then
stringa = "30"
else
stringa = request.querystring("Toptit")
end if
MyToptit = stringa
%>
top:<%=stringa%>px;

<%
if request.querystring("lefttit") = "" then
stringa = "286"
else
stringa = request.querystring("lefttit")
end if
Mylefttit = stringa
%>
left:<%=stringa%>px;

z-index:3
}

</style>

</head>

<body>
<img src="images/Sfondo2.jpg" width="100%" height="auto" />
<div class="Titolo" align="center">

<h1>CSS: utilizzo della proprieta' <em>position</em></h1>
</div>
<h2>Posizionamento standard di un elemento</h2>

<h3>Box contenente un paragrafo</h3>

<div class="box-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet erat
pharetra libero malesuada rhoncus.
</p>
</div>

<div class="box-2">

<form id="mio" action="Posiziona.asp" style="alignment-adjust: central" method="get" >
<label >Box Top:</label>
<input type="text" id="TopBox" name="TopBox" value="<%=MyTopBox %>" style="text-align: center">

<label >Box Left:</label>
<input type="text" id="leftBox" name="leftBox" value="<%= MyLeftBox %>" style="text-align: center"> <br /> <br />

<label >Tit. Top :</label>
<input type="text" id="TopTit" name="TopTit" value="<%=MyTopTit%>" style="text-align: center">

<label >Tit. Left :</label>
<input type="text" id="leftTit" name="leftTit" value="<%= MyLeftTit %>" style="text-align: center"> <br /><br />

<input type="submit" value="Avvia">
</form>

</div>

<hr />
.box-1 { <br />
width:300px; <br />
margin:10px; <br />
padding:10px; <br />
background:#d8d7d7; <br />
position:absolute; <br />
top:<%=MyTopBox%>px; <br />
left:<%=MyleftBox%>px; <br />
}
<br />
.Titolo { <br />
position:absolute; <br />
top:<%=MyToptit%>px; <br />
left:<%=Mylefttit%>px; <br />

z-index:3 <br />
} <br />
<hr />

</body>
</html>