Question

背景与问题：

我将Tailwind CSS和Alpine.js用于一个简单的搜索栏，该搜索栏的下拉菜单使用absolute

此处的Codepen：https://codepen.io/jdonline/pen/YzXpbyJ

当我使用relative放置下拉列表时，它会按照我想要的位置进行完美放置（但会拉伸我不需要的其余页面）。但是，当我将其更改为absolute时，尽管它不再拉长页面，但下拉菜单的扩展范围超出了预期。

示例：

您可以通过单击搜索栏右侧的下拉箭头来查看。您还可以在第26行

中将absolute更改为relative时看到的区别

问题：

如何使用Tailwind.css定位下拉列表，使其具有absolute的位置，但不延伸超过搜索栏？

Answer 1

仅使用顺风，您可以使用以下类

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

所以，就像

<div class="relative">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>

Answer 2

我在 Tailwind Github 个人资料的这个提案中找到了答案。 https://github.com/tailwindlabs/tailwindcss/discussions/1531

添加这个实用程序类就完美了：

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 3

答案很简单，position:absolute应该有一个position:relative的父div，在您的情况下，relative是针对我认为的主体，您需要相对于父div给出是第25行的n行，

您也可以参考Position CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">

无法居中绝对位置（Tailwind.css）

3 个答案: