列内の要素の絶対アライメント

Question

私は2つの列を並べています。左の列には私のコントロール外のHTMLが含まれています。右側には、理想的には左側にクリックされたテキストと位置合わせされるコメントボックスを表示する必要があります。

要素の上端を非兄弟に相対的な位置に配置するにはどうすればよいですか？

フィドル：https://jsfiddle.net/ark51cLu/4/

<div class="container"> 
    <div class="left"> 
     <div class="box1"> 
     <div class="inner-html-box"> 
      <p onclick="clicked(event)">Item 1</p> 
      <p onclick="clicked(event)">Item 2</p> 
     </div> 
     </div> 
    </div> 
    <div class="right"> 
     <div id="comment-box" class="box2">Item 1 comments</div> 
    </div> 
</div> 

Answer 1

あなたはこのようにしたい、

は、のようなトップ値に

box2.style.top = top + "px"; 

function clicked(ev) { 
 
    var top = ev.target.getBoundingClientRect().top; 
 
    var box2 = document.querySelector('.box2'); 
 
    box2.style.top = top + "px"; 
 
    box2.innerText = ev.target.innerText; 
 
    console.log(top); 
 
}

.left{ 
 
    float: left; 
 
    width:75%; 
 
} 
 

 
.right { 
 
    float: right; 
 
    width:25%; 
 
} 
 

 
.box1{ 
 
    border: 1px solid red; 
 
} 
 

 
.box2{ 
 
    border: 1px solid blue; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<div> 
 
\t <div class="left"> 
 
    \t <div class="box1"> 
 
\t <p onclick="clicked(event)">Blah 1</p> 
 
     <p onclick="clicked(event)">Blah 2</p> 
 
    \t </div> 
 
    </div> 
 
<div class="right"> 
 
\t <div class="box2">Blah 1 stuff</div> 
 
    </div> 
 
</div>

を pxを追加します

Answer 2

topは、長さの値（top on MDN）を見込ん：

box2.style.top = top + "px"; 

Answer 3

あなたはjQueryを使ってこれをタグ付けしていないので、ここでバニラjsのバージョンがあります。

const box1 = document.querySelector('.box1') 
 
const box2 = document.querySelector('.box2') 
 

 
box1.addEventListener('click', (e) => { 
 
    let top; 
 
    if(e.target.nodeName = "P") { 
 
    top = e.target.getBoundingClientRect().top 
 
    box2.style.transform = `translateY(${top}px)` 
 
    } else { 
 
    return 
 
    } 
 
})

.left{ 
 
    float: left; 
 
    width:75%; 
 
    
 
} 
 

 
.right { 
 
    float: right; 
 
    width:25%; 
 
    overflow: hidden 
 
} 
 

 
.box1{ 
 
    border: 1px solid red; 
 
} 
 

 
.box2{ 
 
    border: 1px solid blue; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    transition: transform .3s 
 
}

<div> 
 
    <div class="left"> 
 
    <div class="box1"> 
 
     <p>Blah 1</p> 
 
     <p>Blah 2</p> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="box2">Blah 1 stuff</div> 
 
    </div> 
 
</div>