• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 260
  • Last Modified:

Google search layout help

Hello,

I have problems getting the google custom search to display the layout to my desire.

As you can see from photos when i try to use the custom search, the result will shift the contents of the site.

 That's how it looks under normal conditions Issues with Google search changing the display layout
What i want is that when i use custom search, i would like to just overlapped on top of everything, instead of shifting and moving my contents. But i don't know how to do it as i ran out of ideas.

I attached the code with it, if anyone could help me, that would be good.

Thanks you!
site-code.zip
0
Gerson008
Asked:
Gerson008
  • 2
2 Solutions
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
You will need to apply a Z index to the elements. This controls what elements appear over the top of others.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

With z-index the higher the number, the more on top it will be. So in the above, the search would need a higher z-index than the page content. You can only use z-index on positioned elements.
0
 
Gerson008Author Commented:
The problem with the z-index is that it'll moved the content to the bottom layer and i was unable to select anything.

So at the end i played around with the CSS file and setting the search output as position absolute and it appears to solve the problem at this stage.

0
 
Gerson008Author Commented:
Didn't really solve my problem except it did lead me to look up some info provided.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now