Я пытаюсь выучить 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>
Как можно добиться этого позиционирования? Я хочу добиться чего-то вроде этого:
Любой лучший подход к этому приветствуется. Спасибо.