Set coordinates of element in DIV with js, css, html

Question

im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??

score 1 · Accepted Answer · edited Mar 08 '17 at 16:43

1

If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.

 .outer {
      position: relative;
    }

    .inner {
      position: absolute;
      top: 10px; //your coordinate
      left: 5px; //your coordinate
    }

<div class="outer">
      <div class="inner">Your content</div>
</div>

Otherwise, you can simply use padding on the inner element.

edited Mar 08 '17 at 16:43

Aman Kumar

4,533
3
18
40

answered Mar 08 '17 at 16:37

S. Jordan

26
3

Are those coordinate (10px, 5px) offsets of edge of parent DIV or window? – M.Redy Mar 08 '17 at 16:46
Offsets of the edge of the parent div. – S. Jordan Mar 08 '17 at 17:02

score 0 · Answer 2 · answered Mar 08 '17 at 16:43

If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.

Lets say (for example) you need to set the coordinates of the div as <100,50>:

To do that, in CSS, set margin-left: 100px and margin-top: 50px

Set coordinates of element in DIV with js, css, html

2 Answers2