Absolute positioning in Tailwind CSS on an absolute div

I'm having trouble incorporating 4 absolutes within this div. I can't seem to figure out why they are extending beyond the boundaries of the div. Can anyone spot the error?

Check out this Tailwind CSS example

<div class="bg-blue-100 h-40 w-96 px-2">
  <div class="relative w-full h-full">
    <div class="absolute top-0 bg-blue-200 w-full">
      <div class="absolute left-0">1</div>
      <div class="absolute right-0">2</div>
  </div>
   <div class="absolute bottom-0 bg-slate-400 w-full">
     <div class="absolute left-0">3</div>
     <div class="absolute right-0">4</div>
   </div>
  </div>
</div>
htmlcsstailwind-css

Answer №1

Make sure to adjust the height of the parent absolute elements

<div class="bg-blue-100 h-40 w-96 px-2">
  <div class="relative w-full h-full">
    <div class="absolute top-0 h-10 bg-blue-200 w-full">
      <div class="absolute left-0">1</div>
      <div class="absolute right-0">2</div>
  </div>
   <div class="absolute bottom-0 h-10 bg-slate-400 w-full">
     <div class="absolute left-0">3</div>
     <div class="absolute right-0">4</div>
   </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

DomSanitizer in Angular is not able to bind to an Angular component

Trying to dynamically insert HTML content into a DIV has been successful when done statically. The following code is functioning properly: <popover-content #pop1 title="Cool Popover" placement="right" ...

htmlangulardom

The transformation from CSS and HTML to RoR resulted in sprites being converted into mysterious black boxes

Previously, this site was functioning fine without Ruby on Rails. However, after moving the code to Rails, a strange issue has arisen where the hover images turn black when the mouse is placed over them. // Place all the styles related to the home control ...

htmlruby-on-railscssruby

Guide on utilizing the list of names in a POST request

<td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/> </td><td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/></td><td class="widht200"> <input type=" ...

phpjavascripthtmlformspost

Guide to creating intricate designs on an HTML5 Canvas, one pixel at a time

Imagine a scenario where there is a 900x900 HTML5 Canvas element involved. In this case, there is a function named computeRow, which takes the row number as a parameter and returns an array of 900 numbers. These numbers represent colors ranging from 0 to ...

javascripthtmlperformancecanvashtml5-canvas

Button refuses to align with the list bullet

Starting over from scratch. Can someone assist me in aligning the button and pseudo-bullet on the same line, even if the button text spans multiple lines? This is the HTML code: <ol> <li> <button>What happens when the butto ...

css

What is the method to showcase content by category with a button click within the same page using Django?

I am currently working on a portfolio project where I need to categorize the projects based on their categories. I have added buttons for each category and I want to display the contents of each category below the respective button when clicked. For exampl ...

pythonhtmldjangodjango-modelsdjango-templates

The word-breaking function is not functioning as anticipated

I am facing an issue with a container that holds multiple divs. I am attempting to prevent the contents of these divs from overflowing their parent element and breaking the text if it exceeds the parent's boundaries. However, my efforts are unsuccessf ...

htmlcss

Aligning content within a div using Bootstrap 4

For a demonstration of this code, please visit the following Codepen link: codepen <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstr ...

htmlbootstrap-4

What could be causing scrollTo to function in my ClickListener but not in AfterViewInit?

I was pondering about why the code snippet below is functioning properly: scroll(){ window.scrollTo(0, this.ypos); // executes without any issues } And in my html.component: <button (click)="scroll()">Scroll</button> but the cod ...

javascripthtmlangularscrollto

Flask Pagination : UnboundLocalError occurs when trying to reference a local variable 'res' before it has been assigned

I'm currently troubleshooting an issue with flask pagination. Whenever I attempt to implement it, I encounter the UnboundLocalError. Even after removing all variables, the pagination feature still fails to function as intended. @app.route('/&apos ...

pythonhtmlmysqlflaskjinja2

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...

htmlimagecssresponsive-design

Adjust the content size to 100% based on the quantity of items in a row

I've been having a hard time creating an image gallery that adjusts its size automatically (width: 100%) based on the number of items it contains. For example, take a look at this gallery: http://codepen.io/anon/pen/eNMOEz .item { width: 75px; h ...

javascripthtmlcss

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

cssreactjstwitterbootstrap-4

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

Calculate the total of additional user inputs and show the result in a separate element using JavaScript

Query Is there a way for an element to dynamically show the total of different inputs? Situation I have multiple text boxes all with the same class. There are 4 input fields, each containing a number - Input 1 is "1", Input 2 is "2", and so on. The goal ...

javascriptjqueryhtmlinput

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...

javascriptjqueryhtmlcssfabricjs

Disabling hover effects in Chart.js: A step-by-step guide

Is there a way to disable hover effects, hover options, and hover links on a chart using chart.js? Here is the code I have for setting up a pie chart: HTML.. <div id="canvas-holder" style="width:90%;"> <canvas id="chart-area" /> </div ...

javascriptjqueryhtmlchart.js

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

htmlcssz-index

What is the best way to extend an image to fill the width of a webpage?

Can you advise me on how to expand the image to fit the width of my webpage? If possible, could you take a look at this website: Poklanjam The specific image I am referring to is the one of the city on the left-hand side. What additional CSS code should ...

csswordpress

Progress bar for uploading files

Similar Question: Upload Progress Bar in PHP Looking for suggestions on a simple and effective method to implement a file upload progress bar. Interested in a solution that involves both javascript and php. Any recommendations? ...

phpjavascripthtmlcss