Tailwind css中HTML元素的定位

Question

我正在尝试学习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>

我该如何实现这种定位呢？我想要实现类似于这样的效果：

欢迎提出更好的方法。谢谢。

- Nitish Kumar

---

使用背景图像来呈现所需内容是一种选择吗？如果不是，为什么？ - Lajos Arpad

如果您能够将您的代码放在JSFiddle或CodePen上，我很乐意查看。 - Alexandre Elshobokshy

Answer 1

我在研究我的问题时做了很多工作，我发现我的绝对定位元素占用了我需要的所有空间。我知道我必须定义一个空白空间或定义 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>

希望这能帮助到某个人。谢谢。

- Nitish Kumar