Tailwind mathjax 显示在导航栏上方

Tailwind mathjax is showing above to the navbar

不好意思再问一个问题,我早上也问了一个问题。

这次我遇到了 Mathjax 文本问题。由于我的导航栏是固定的,我的文本在导航栏内,而数学表达式在导航栏上方。从今天早上开始,这让我很烦。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" 


<div class="flex flex-col h-screen">
    <!-- navbar -->
    <div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
        <div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
            <div class="p-4 flex flex-row items-center justify-between"> <a href="#" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sachchidanand Prasad</a>
                <button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
                        <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                        <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
                    Home
                </a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
                    Research
                </a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
                    CV
                </a> </nav>
        </div>
    </div>
    <!-- section -->
    <section class="text-gray-600 body-font">
        <div class="container lg:px-36 py-24 mx-auto">
            <div class="flex flex-col items-center text-center justify-center">
                <h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
                <div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
            </div>
            <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
                <div class="p-4 md:w-full flex">
                    <div class="flex-grow lg:px-32 px-6">
                        <p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent <a href="#publications" class="text-blue-500 hover:text-blue-800">paper</a> (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
                        <p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
                        <p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
                        <h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
                        <ol class="pl-8 list-decimal">
                            <li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) <a href="ml-8 https://arxiv.org/abs/2011.02972" target="_blank" class="text-blue-500 hover:text-blue-800">ArXiv link</a>
                                <div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
                                    <p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- footer -->
    <footer class="foot mt-auto border-t border-gray-200">
        <div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
            <div class="justify-between w-full mt-4 text-center lg:flex">
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Useful Links
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
                    </ul>
                </div>
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Useful Links
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
                    </ul>
                </div>
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Social Networks
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="flex justify-center">
            <p class="text-base text-gray-400"> All rights reserved by @ <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
        </div>
    </footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
    tex: {
        inlineMath: [
            ['$', '$'],
            ['\(', '\)']
        ],
        displayMath: [
            ['$$', '$$'],
            ['\[', '\]']
        ]
    },
    svg: {
        fontCache: 'global'
    }
};
</script>

我们可以在上图中看到数学文本位于导航栏上方。我不知道到底是什么问题。任何帮助将不胜感激。

将tailwind class z-10插入到导航栏容器中,使导航栏更高z-Index

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" 


<div class="flex flex-col">
    <!-- navbar -->
    <div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 z-10">
        <div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
            <div class="p-4 flex flex-row items-center justify-between"> <a href="#" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sachchidanand Prasad</a>
                <button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
                        <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                        <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
                    Home
                </a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
                    Research
                </a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
                    CV
                </a> </nav>
        </div>
    </div>
    <!-- section -->
    <section class="text-gray-600 body-font">
        <div class="container lg:px-36 py-24 mx-auto">
            <div class="flex flex-col items-center text-center justify-center">
                <h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
                <div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
            </div>
            <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
                <div class="p-4 md:w-full flex">
                    <div class="flex-grow lg:px-32 px-6">
                        <p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent <a href="#publications" class="text-blue-500 hover:text-blue-800">paper</a> (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
                        <p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
                        <p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
                        <h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
                        <ol class="pl-8 list-decimal">
                            <li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) <a href="ml-8 https://arxiv.org/abs/2011.02972" target="_blank" class="text-blue-500 hover:text-blue-800">ArXiv link</a>
                                <div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
                                    <p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- footer -->
    <footer class="foot mt-auto border-t border-gray-200">
        <div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
            <div class="justify-between w-full mt-4 text-center lg:flex">
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Useful Links
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
                    </ul>
                </div>
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Useful Links
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
                    </ul>
                </div>
                <div class="w-full px-4 lg:w-1/3 md:w-1/2">
                    <h2 class="mb-2 font-bold tracking-widest text-gray-900">
                Social Networks
                </h2>
                    <ul class="mb-8 space-y-2 text-sm list-none">
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
                        <li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="flex justify-center">
            <p class="text-base text-gray-400"> All rights reserved by @ <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
        </div>
    </footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
    tex: {
        inlineMath: [
            ['$', '$'],
            ['\(', '\)']
        ],
        displayMath: [
            ['$$', '$$'],
            ['\[', '\]']
        ]
    },
    svg: {
        fontCache: 'global'
    }
};
</script>