How can a div at the top of the page coexist with Adminstration Menu? I want to place the Page execution times at the top of the page. I first tried it in a block as mentioned in this question, but the code for the block executes before the page is fully rendered, resulting in the wrong time.

Devel places the Page execution time is place in a div class .dev-query and I tried placing it at the top of the page.

The problem is it gets obscured by Admin menu and after reading a few solutions such as this one on stackoverflow 1 and stackoverflow 2 and I wonder if someone has been there and done that in relation with Admin menu
One way of doing that with the CSS is as below:

.dev-query {
    position: fixed;
    top: 33px;
    width: 100%;
    left: 30px;
    color: #000;
    z-index: 100;
}


I have tried that and it seems to be working for me.



Another way of doing this with the JS I have mentioned here is somewhat like below:

&lt;div id="page-execution-time-custom"&gt;&lt;/div&gt;
&lt;script&gt;
(function ($) {
  // Jquery onload function.
  $(document).ready(function(){
    // Display the page execution time in the custom wrapper as below.
    var page_execution_time = $('.dev-query').text();
    $('#page-execution-time-custom').text(page_execution_time);
  });
})(jQuery); 
&lt;/script&gt;