находка расстояния элемента от левого

Question

я элемент по центру й середины экрана с помощью трюка, например

.info{ 
    z-index: 0; 
     width: 700px; 
     height: 500px; 
     margin: auto; 
     position: absolute; 
     top: 0px; 
     left: 0; 
     bottom: 0; 
     right: 0; 
    } 

внутри этого элемента у меня есть еще один элемент, как я могу получить расстояние этого элемента от верхнего левого угла боковая сторона? Я пробовал свойство offsetLeft, но он вернулся 0, из-за трюка, о котором я упомянул, что все свойства установлены на 0, как я могу это преодолеть? HTML

<div class="info"> 

    <div class="vyrobky"> 
<div class="vyrobky_holder"> 
<ul> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
     <li> 
      <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div> 
     </li> 
    </ul> 
</div> 

</div></div> 

Answer 1

Поскольку вы установили коробку с запасом и установите top, left, right, bottom свойства 0, там не будет какое-то расстояние между коробкой и его родители.

Но вы можете получить вычисленные значения margin, которые относятся к пространству между содержимым и родительским элементом.

var el = document.querySelector('.info'); 
var style = window.getComputedStyle(el); 

var top = style['margin-top'], 
    left = style['margin-left']; 

alert(
    "Top:" + top + '\n' + 
    "Left:" + left 
); 

Fiddle