主页 / coding / 问题 / 79053946
Accepted
Paul Kendal
Asked: 2024-10-04 18:58:14 +0800 CST

屏幕底部带有边距的顺风位置元素

  • 772

我试图在屏幕的右下角放置一个 div，右侧边距为 10px，底部边距为 10px。

我尝试了下面的 div 代码。它确实将 div 放置在屏幕的右下角，但不允许我为其添加边距。

我还想将 div 保留在右下角。例如，如果它是一个长页面并且用户滚动到页面底部，它将始终保持固定在右下角。

<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Position Class</b>
    <div class="static text-left p-2 m-2 bg-green-200 h-48">
        <p class="font-bold">Static parent</p>


        <div class="absolute bottom-0 right-0 p-2  mb-10
                    bg-green-500">

            <p>Absolute child</p>

        </div>
    </div>
</center>

更新;

我尝试按照@justanotherpeter 的建议操作，但不起作用。div 会上升到屏幕顶部。

在此处输入图片描述

下面是上图的完整代码。

<!DOCTYPE html>
<head>
    <link href=
              "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>

<body class="text-center">
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Position Class</b>
    <div class="static text-left p-2 m-2 bg-green-200 h-[200vh]">
        <p class="font-bold">Static parent</p>
        <div class="absolute bottom-0 left-0 p-2 bg-green-500">
            <p>Absolute child</p>
        </div>
    </div>
    <div class="fixed bottom-[10px] right-[10px] p-2 bg-green-500">
        <p>Fixed positioned div</p>
    </div>
</center>

</body>

</html>
tailwind-css

2 个回答

  1. 要将 div 定位在屏幕右下角，并与右边缘和下边缘留出 10 像素的边距，您应该使用 Tailwind CSS 中的固定定位类。这将确保即使用户滚动，div 仍保持固定在该位置。

    顺风游乐场

    • 0
  2. Best Answer

    出现此问题的原因是您的代码使用了自定义样式，而此代码使用了从 生成的样式<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">。您可以采用两种方法。

    仅使用不带自定义样式的 Tailwind 类作为以下示例代码。或者按照文档选择一种方式为您的项目安装 Tailwind。

    <!DOCTYPE html>
<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center">
  <h1 class="text-green-600 text-5xl font-bold">
      GeeksforGeeks
  </h1>
  <b>Tailwind CSS Position Class</b>
  <div class="static text-left p-2 m-2 bg-green-200 h-screen">
      <p class="font-bold">Static parent</p>
      <div class="absolute bottom-0 left-0 p-2 bg-green-500">
          <p>Absolute child</p>
      </div>
  </div>
   <div class="fixed bottom-0 right-0 p-2 bg-green-500">
      <p>Fixed positioned div</p>
  </div>
</body>

</html>

    • 0

相关问题