Labels position is changed when window is lowered

Question

I create dynamically Labels, and when the window has dimmed the position of the Labels change. I used the position Fixed, but still move.

Example :http://jsfiddle.net/zy6nLcgL/7/

var txtmaxresistance=100;
	var maxtemp=100;
	var resolutionOhm=10;
    var resolutionTemp=10;
    var txtmintemp=0;
    var txtminresistance=0;

	var svg = document.querySelector('svg');

	var dernier_position_temp =new Array();
	var number_temp =new Array();
	
	var dernier_position_ohm =new Array();
	var number_ohm =new Array();

	for (var i = 1; i <= resolutionOhm; i++) {
		
		var distance = 400/resolutionOhm;		
		var y1 = 450;
		
		//si c'est la premiere ligne
		if(i==1){
			
			x1= 60+distance;
			dernier_position_ohm.push(x1);
			
        }else{
			x1 = ((dernier_position_ohm[i-2]+distance));
			dernier_position_ohm.push(x1);
		
		}
		
	
		var x2 = x1;
		var y2 =  470;
		
		var line = document.createElementNS( 
			"http://www.w3.org/2000/svg", "line");
		line.setAttributeNS(null, "x1", x1);
		line.setAttributeNS(null, "y1", y1);
		line.setAttributeNS(null, "x2", x2);
		line.setAttributeNS(null, "y2", y2);
		line.setAttributeNS(null, "stroke", "black");
		line.setAttributeNS(null, "stroke-width", "2");
		svg.appendChild(line);
		
	
		var number=Math.round(((txtmaxresistance-txtminresistance)/resolutionOhm)*i+txtminresistance);

		//push in array pour souver valeur (fichier SVG)	
		number_ohm.push(number);
		
		//creation labels
		var labeltemp = document.createElement("Label");
		labeltemp.style.left = x2-10+ "px";
		labeltemp.style.top = y2+5+ "px";  
		labeltemp.style.position='fixed';
		
		var number = document.createTextNode(number);
		labeltemp.appendChild(number);
    
		document.body.appendChild(labeltemp);
		
	}

body,html,#dd,#svg1{
	padding:0;
	margin:0;
	width:98%;
	height:98%
}
				
#dd{
	position:absolute;
}

circle {cursor:move}

.cursor {
    position: absolute;
    width: 80%;
    height: 80%;
}


.cursor-h {
    position: relative;
	left: 60px;
    width: 400px;
    height: 0;
    border-top: 1px solid black;
}

.cursor-v {
    position: relative;
	top:60px;
    width: 0;
    height: 400px;
    border-left: 1px solid black;
}

.tablemain{
	width:100%;
}



.tdgraph{
	width:50%;
	
}

.tdtableau{
	width:50%;
	position:relative;
}

button:hover {
	background:#fffff;
}

#btn:hover
{
	background-color: LightCyan;
}

label#lbl_souris {
  position: absolute;
  background-color: Cyan;
}

#demo{
	 position: absolute;
	 left:140px;
}

label#lbl_Temp{
	position: absolute;
	left:35px;
	top:35px;
	
}

#lbl_MinTemp{
	position: absolute;
	left:40px;
	top:450px;
}

#lbl_Ohm{
	position: absolute;
	left:470px;
	top:455px;
}

#lbl_MinOhm{
	position: absolute;
	left:60px;
	top:475px;
}

#labeltemp{
	position: fixed;
}


#div_textresolution{
	margin: 0; 
	padding: 0;
	position: fixed;
}

<table>
    <tr>
        <td>
				<table class="tablecourbe" border=1 align=center>
					<tr>
						<td><label for="checkcsv">
							ddfsfdsf
						</label></td>
						<td><input type="checkbox" name="checkcsv" value="csv" id="checkcsv" /></td>
					</tr>
					<tr>
						<td><label>
			            gdfgfdd
							</label></td>
						<td><input type=text name=txtnamefile id=txtnamefile required value=dsfsfs /></td>
						
					</tr>					
				</table>
				</fieldset>
			<center><label id="demo" class=alarm ></label></center>
			</td>
			
			<td class=tdtableau >
				
				<div class="cursor" >
					<div class="cursor-h"></div>
					<div class="cursor-v"></div>
				</div>
				
				<div id="dd">		
					<svg id="svg1" style=position:static>
						<g id=g>
						</g>			
					</svg>	
				</div>
				
				<label id=lbl_Temp><?php echo trad($f_lng,"Temp");?></label>
				<label id=lbl_MinTemp>0</label>
					
				<label id=lbl_Ohm><?php echo trad($f_lng,"Ohm");?></label>
				<label id=lbl_MinOhm>0</label>
                
                <div id=div_textresolution></div>	
				<svg x=0 y=0 width=530px height=500px fill=black >
					
					//horizontal
					<line title="Horizontal" x1=60 y1=460 x2=460 y2=460 stroke-width=2 stroke=black /> 

				</svg>
				
				<label id="lbl_souris"></label>
			</td>
		</tr>
		
		</table>

Answer 1

You can use css media query to reposition your label when size decreases

/*normal*/
label{
    margin-top: 12em;
}
/*quando o width diminui de 765px eu reposiciono o section*/
@media screen and (min-width: 765px){
    label{
        margin-top: 3em;
    }
}