- February 28, 2018 at 7:49 pm #16963
I am developing on localhost. Theme is Divi with childtheme.
I have a search box in one column and the settings (dropdown with all the categories) in another.
Below I have the results.
But the dropdown goes under the results. I am trying to give both the dropdown and the result different z-index but to no avail. Se attached image.
How can I have the dropdown to be over the results? As it should be.
Attachments:You must be logged in to view attached files.March 1, 2018 at 10:49 am #16970
It is actually set higher than the results, it should be displayed over it. The same setup on a test server looks like this on my end: https://i.imgur.com/2LOWJc3.png
I am guessing, that the issue is the z-index of the parent element. Do you happen to use a page builder of some sort, or any custom code to place the elements like that? If so, then the z-indexes might be set to the same value on those blocks, meaning that the latest rendered block will always float over the preceeding ones. Try looking at the blocks on the builder, it may support changing the z-index values on each block. In HTML the parent z-indexes are always higher priority, so no matter how big the drop-down z-index is set, the parent z-index will always apply.
If you can link me to a test page where I could see this, I might be able to suggest a custom CSS code to adjust the z-index values correctly.Best,
If you like my products, don't forget to rate them on codecanyon :)
March 1, 2018 at 1:58 pm #16976
Tank you for pointing me in the right direction.
I set the z-index on the first row to 20 (the row/div that contains the search and settings)
This was done in the Divi-builder (Divi-theme).
And it worked!
Thanks again Ernest for the correct and fast answer.
/StefanMarch 1, 2018 at 2:25 pm #16977
You must be logged in to reply to this topic.