在 Tailwind css 中定位 HTML 元素答案

【问题标题】：Positioning of HTML elements in Tailwind css在 Tailwind css 中定位 HTML 元素
【发布时间】：2020-06-13 18:16:09
【问题描述】：

我正在努力学习tailwind-css，或者我会说学习css，我正在努力解决元素的位置问题。处理Vue js 组件。

到目前为止，我已经完成了一些元素的设计：

我想在banner/dark-blue 区域内添加一些形状或设计，然后在其中添加一些小部件框。我的代码如下所示：

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 left-0">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block">
        <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
            <slider></slider>
            <div class="flex justify-around">
                <card></card>
                <card></card>
                <card></card>
                <card></card>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="bg-white overlflow-hidden">
            <div class="relative">
                <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
                <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
            </div>
        </div>
    </div>
    <feature></feature>
</div>

参考组件代码：https://github.com/nitish1986/sample_website

我的方法是固定父元素的位置或使其相对，然后使用相对于其父元素的绝对定位来定位形状，但是每当我尝试将绝对位置放置到网站顶部时。它没有采取各自的定位

<div class="bg-white overlflow-hidden">
    <div class="relative">
        <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
        <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
    </div>
</div>

如何才能实现这个定位？我想实现这样的目标：

欢迎任何更好的方法。谢谢。

【问题讨论】：

是否将背景图像与您想要的内容一起使用？如果不是，为什么？
如果您能够在 JSFiddle 或 codepen 上获取您的代码，我很乐意看看

标签： html css vue.js css-position tailwind-css

【解决方案1】：

要实现这种网格，您应该考虑使用 Tailwind CSS 提供的弹性类。您可以在官方文档中找到非常好的指南： https://tailwindcss.com/docs/flex/

特别尝试 .flex-1 类，它可以允许弹性项目根据需要增长和缩小，忽略其初始大小。

【讨论】：

【解决方案2】：

我对我的问题进行了大量研究工作，我发现我的绝对元素占用了我所需的所有空间。我开始知道我必须定义一个空白空间或定义完全由我的绝对元素消耗的 div 的高度。因为在我的代码中我有一个很长的绝对元素，所以唯一可以覆盖的是空的 div 空间。

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 h-auto">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block h-auto">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block bg-white h-screen">
        <div class="relative">
            <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
                <slider></slider>
                <div class="flex justify-around">
                    <card></card>
                    <card></card>
                    <card></card>
                    <card></card>
                </div>
            </div>
        </div>
    </div>
    <div class="block mt-48 p-56">
        <div class="p-2 w-full h-100"></div>
    </div>
    <feature></feature>
    <preview></preview>
    <about-us></about-us>
</div>

所以在我的代码中，我保留了空格：

<div class="block mt-48 p-56">
    <div class="p-2 w-full h-100"></div>
</div>

希望这对某人有所帮助。谢谢

【讨论】：