Increase Z Index for controls
iamntz opened this issue · 2 comments
iamntz commented
There are some cases where:
- you cannot hit the column controls because you used negative margins on the below/above sections
- you have a custom widget that have elements positioned relative/absolute that will be right over the widget controls (edit, delete)
This will fix it:
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-widget-settings,
.elementor-editor-active .elementor-column:hover {
z-index: 9999 !important;
}
AustinGil commented
Just to add to this conversation, I have a fixed header that sits at the top of my pages. On an Elementor page, I cant access the Column or Section settings for the very top Elementor section because the header has a z-index of 50 and the Elementor controls have a z-index of 2.
To fix it, I found that the following rule works well:
The old style:
.elementor-editor-active .elementor.elementor-edit-mode .elementor-element>.elementor-element-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
letter-spacing: 0;
z-index: 2;
pointer-events: none;
}
The new styles:
.elementor-editor-active .elementor.elementor-edit-mode .elementor-element>.elementor-element-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
letter-spacing: 0;
z-index: 999;
pointer-events: none;
}