div 아래에 div를 배치하려고 시도했지만 버튼의 오른쪽에 정렬하는 데 문제가 있습니다.

Question

react가 사용 중이며 버튼이 하나 있으며이 버튼 중 하나에 div가 포함 된 div가 열립니다. 클릭에 대한 정보.

저는 CSS에 약간의 문제가 있습니다. https://jsfiddle.net/4ovxw4eg/1/

그리고 조각 :

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.openItem { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 

 
.test { 
 
    position: relative; 
 
}

<div class="container"> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button class="test"> 
 
    The Button 
 
    </button> 
 
</div> 
 

 
<div class="openItem"> 
 
    This should be below and to the right edge of The Button 
 
</div>

가 어떻게이 문제를 접근해야 다음 예제 바이올린입니까? 단추의 행에 플렉스 상자를 사용하고 있습니다.

내 반응 코드는 someProp이 true 일 경우이 상자를 표시합니다. 즉. showPopup && renderPopup

Answer 1

div의 컨테이너 div 내부로 div를 이동하고 인라인 플렉스를 사용하고 해당 위치에 상대적 위치를 지정하십시오. 같은

.container { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    position: relative; 
 
} 
 

 
.openItem { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 40px; 
 
} 
 

 
.test { 
 
    position: relative; 
 
}

<div class="container"> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button class="test"> 
 
    The Button 
 
    </button> 
 
    <div class="openItem"> 
 
    This should be below and to the right edge of The Button 
 
    </div> 
 
</div>

Answer 2

.container { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    position: relative; 
 
} 
 

 
.openItem { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0px; 
 
} 
 

 
.test { 
 
    position: relative; 
 
}

<div class="container"> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button> 
 
    some button 
 
    </button> 
 
    <button class="test"> 
 
    The Button 
 
    </button> 
 
    <div class="openItem"> 
 
    This should be below and to the right edge of The Button 
 
    </div> 
 
</div>