How to change cq-overlay and cq-draggable to right position?

Hi,

I have problems with AEM components.

Step 1: I created a position for admin add a component.

<div class="membership-tiers responsivegrid-area">

     <div class="responsivegrid">

          <div data-sly-resource="${'aoamembershiptiers' @ resourceType='wcm/foundation/components/responsivegrid'}">

          </div>

     </div>

</div>

Step 2: I created a component membershipTier

Step 3:I add 2 components Classic & Elite into that position

Source image file 11565 not available

Problems:

1. Drag & Drop position display at the top of the Elite component. It must be display at the bottom of the Elite component.

2. When I click on the Classic component to config the content, It will display the config of the Elite component. When I click on the Elite component, it can't display the config icon. I want to click on the Classic component will display config for Classic component and click to Elite component will display config content for Elite component.

Source image file 11566 not available

The problem may be by the HTML and CSS of the Edittable in AEM when generate the component and drag & drop component code.

May be error by the data-type="Editable" with class cq-Overlay cq-Overlay--component cq-draggable cq-droptarget is-selected is-active

There are big problems with the pages, that have position for Drag&Drop for add component.

How to fix it?

Thank you so much,

Bien Hoang