Programmiererforum

@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
width: 100vw;
height: 100vh;
}

body {
margin: 0;
}

html, body {
overscroll-behavior: none; /* Prevent the bounce effect on mobile */
-webkit-text-size-adjust: none; /* Disable automatic text resizing */
min-height: 100%;
-webkit-overflow-scrolling: none;
}

< /code>
Und dies ist der CSS -Tailwind -Stil für die Schaltfläche: < /p>
className="absolute bottom-6 right-6 w-14 h-14
rounded-full bg-[#0c0c0d] flex items-center
justify-center shadow-lg z-50 cursor-pointer
text-white transition-transform hover:bg-[#535151]
hover:scale-105"

Ich habe eine Schaltfläche in der unteren rechten Ecke des Bildschirms hinzugefügt und sieht auf allen Browsern mit Ausnahme von iOS Safari gut aus. Die Suchleiste befindet sich über der Schaltfläche. Sie sieht jedoch auf Google Mobile Browser gut aus. Ich bin auf eine Website gestoßen, auf der sie es geschafft haben, die Schaltfläche über die Suchleiste zu platzieren, aber ich kann nicht herausfinden, wie. < /P>
Hier ist mein CSS: < /p>
[code]@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
width: 100vw;
height: 100vh;
}

body {
margin: 0;
}

html, body {
overscroll-behavior: none; /* Prevent the bounce effect on mobile */
-webkit-text-size-adjust: none; /* Disable automatic text resizing */
min-height: 100%;
-webkit-overflow-scrolling: none;
}

< /code>
Und dies ist der CSS -Tailwind -Stil für die Schaltfläche: < /p>
className="absolute bottom-6 right-6 w-14 h-14
rounded-full bg-[#0c0c0d] flex items-center
justify-center shadow-lg z-50 cursor-pointer
text-white transition-transform hover:bg-[#535151]
hover:scale-105"
[/code]
Hinweis: Jedes Mal, wenn ich versuche zu stellen, schließt die Frage, weil sie feststellt, dass es doppelt ist. Ich habe jedoch die Lösung dieser Frage ausprobiert und es hat bei mir nicht funktioniert, es auch ab 3 Jahren AG, also ist es veraltet.