右侧的绝对定位顺风元素：0 不起作用答案

【问题标题】：Absolutely positioned tailwind element for right: 0 is not working右侧的绝对定位顺风元素：0 不起作用
【发布时间】：2021-09-18 09:22:52
【问题描述】：

我有一个红色输入，它绝对位于下面的灰色 div 中（附加图像）。我有点困惑为什么 right-2 不起作用，因为我希望它显然包含在盒子里。任何帮助都会很棒。谢谢

<div className="grid grid-cols-7 gap-0 h-full mx-2">
                        <div className="cursor-pointer border-gray-200 bg-gray-100 h-full">
                            <span className="text-sm mb-0">Single or Couple</span>
                            <div className="text-lg -mt-1">Single</div>
                        </div>
                        <div className="relative border-r border-gray-200 bg-gray-200 h-full">
                            <input
                                id="salary"
                                name="salary"
                                className="peer text-xl absolute left-2 right-2 top-5 rounded-md bg-red-200"
                                placeholder="Salary"
                                type="number"
                            />
                            <label
                                htmlFor="salary"
                                className="absolute left-2 top-0 bg-green-100"
                            >
                                Salary
                            </label>
                        </div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <button>Go!</button>
                    </div>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

我猜问题可能是你同时使用了left-2和right-2，这使得right属性无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box {
        position: relative;
        background: gray;
        width: 400px;
        height: 170px;
    }

    .left, .right {
        position: absolute;
        width: 200px;
        height: 50px;
    }

    .left {
        left: 0;
        background: pink;
    }

    .right {
        top: 60px;
        right: 0;
        background: lightblue;
    }

    .left.right {
        top: 120px;
        background: lightgreen;
    }
</style>
<body>
<div class="box">
    <div class="left">left: 0;</div>
    <div class="right">right: 0; // has effect</div>
    <div class="left right">left: 0;<br/>right: 0; // no effect</div>
</div>
</body>
</html>

【讨论】：