CSS absolute positioning not functioning as expected

I am experiencing an issue with positioning child elements within a parent element. The parent element is relatively positioned, while the two child elements are absolutely positioned to be in the top left and top right corners. However, despite having explicit heights and widths set for both child elements, they are not appearing in the DOM. I have also attempted adjusting the z-index values with no success.

Below is the relevant markup and CSS:

.first_customer, .all_customer {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.inner {
    text-transform: uppercase;
    width: 100%;
}

.inner > * {
    margin: 20px auto;
    background-color: #fad63a;
    padding: 7px;
    border-radius: 3px;
    box-shadow: inset 0 0 10px #000;
    border: 1px solid #fff;
    text-align: center;
    width: 85%;
}

.inner > h4 {
    font-size: 10px;
}

.inner > h6 {
    font-size: 10px;
}

.inner > p {
    font-size: 10px;
}

.topleftcorner, .toprightcorner {
    position: absolute;
    min-width: 100px;
    min-height: 100px;
}

.topleftcorner {
    top: 0;
    left: 0;
    z-index: 2;
}

 
<div class="first_customer">
    <div class="topleftcorner"></div>
    <div class="toprightcorner"></div>

    <div class="inner">
        <h4>New Customers</h4>
        <h6>$10 Gift</h6>
        <p>Dry Cleaning</p>
    </div>
</div>

         

Answer №1

Success! I have successfully implemented the background color and position for the right div.

.first_customer,.all_customer{
 flex: 1 1 0;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

.inner{
  text-transform: uppercase;
  width: 100%;
}

.inner > *{
  margin: 20px auto;
  background-color: #fad63a;
  padding: 7px;
  border-radius: 3px;
  box-shadow: inset 0 0 10px #000;
  border: 1px solid #fff;
  text-align: center;
  width: 85%;

}

.inner > h4{
  font-size: 10px;
}

.inner > h6{
  font-size: 10px;
}

.inner > p{
  font-size: 10px;
}

.topleftcorner,.toprightcorner{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #000;
}

.topleftcorner{
  top: 0;
  left: 0;
  z-index: 2;
}

.toprightcorner {
  top: 0;
  right: 0;
  z-index: 2;
}
<div class="first_customer">

  <div class="topleftcorner"></div>
  <div class="toprightcorner"></div>

  <div class="inner">
    <h4>New Customers</h4>
    <h6>$10 Gift</h6>
    <p>Dry Cleaning</p>
  </div>

</div>

Answer №2

Close to completion, just a few adjustments needed for the upper right corner.

.first_customer,.all_customer{
 flex: 1 1 0;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

.inner{
  text-transform: uppercase;
  width: 100%;
}

.inner > *{
  margin: 20px auto;
  background-color: #fad63a;
  padding: 7px;
  border-radius: 3px;
  box-shadow: inset 0 0 10px #000;
  border: 1px solid #fff;
  text-align: center;
  width: 85%;

}

.inner > h4{
  font-size: 10px;
}

.inner > h6{
  font-size: 10px;
}

.inner > p{
  font-size: 10px;
}

.topleftcorner,.toprightcorner{
  position: absolute;
  min-width: 100px;
  min-height: 100px;
  background: red;
  top: 0;
}

.topleftcorner{
  left: 0;
  z-index: 2;
}

.toprightcorner{
  right: 0;
  z-index: 2;
}
<div class="first_customer">

  <div class="topleftcorner"></div>
  <div class="toprightcorner"></div>

  <div class="inner">
    <h4>New Customers</h4>
    <h6>$10 Gift</h6>
    <p>Dry Cleaning</p>
  </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

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

Bizarre CSS Transitions and Scaling Quirks in Webkit

Working on a website, you can check it out here In Chrome, some strange behavior occurs when the window reaches a certain resolution. Specifically, at 943 pixels width, white bars appear next to images when hovering over them, giving the impression that t ...

How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance. Below is the table data extracted from index.html.erb: <table class="table"> <thead> <tr> <th>Area& ...

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

Unexpected activation of Internet Explorer media queries causing display issues

Check out my CSS code below: @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-heigh ...

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property. Currently working on a website with promo panels display ...

Place the child DIV at the bottom of its parent DIV

I've searched through open questions but couldn't find a solution. The code snippet in question looks like this: ... <div style="some height"> <div style="some width"> .......and so on.. .. < ...

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

A PHP mishap causing unexpected errors

My login page confirmation code is giving me an error when trying to log in: Warning: mysql_fetch_row() expects parameter 1 to be resource, boolean given in /home/u133082736/public_html/login.php on line 14 This is the snippet of my code that's ca ...

Global setting of font size ratio in Material UI library

After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...

iOS exhibits a flashy display of Material Select lighting up

In my attempt to develop a website using Material Design, I encountered an issue with the Material Select component. Whether I utilize MDB (Material Design for Bootstrap) or the Materialize CSS framework, both function well on Windows/OSX/Android devices. ...

Tips for preventing redundant data entry in a table

Currently, my table displays like so: https://i.sstatic.net/iozOF.jpg The structure of the HTML for the table is as follows (only a snippet is shown, as the rest looks similar): <table class="table table-bordered table-condensed"> <tr> ...

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

Issue with React Material UI: Box is not scrollable vertically

I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...

Why is it that $_GET consistently returns null despite successfully transmitting data via AJAX?

I'm currently developing a PHP script that dynamically generates tables in MySQL based on user input for the number of rows and columns. The data is being sent to the server using AJAX, but even though the transmission is successful, the server is rec ...

Styling problem arises on IOS devices due to rounded corners affecting select box

The dropdown menu I am using to "sort products" on our WordPress website is causing some styling issues specifically on IOS devices. I would like the dropdown menu to have rounded corners. It seems to display rounded corners on IOS, but it still shows the ...

Revamp the Bootstrap Form Upload feature

I am looking to redesign the Bootstrap Form Upload field. The main reason behind this is that in Bootstrap, the file upload field is treated as one single component, making it impossible to separate the file upload button from the file upload text. The fi ...

What are the best techniques for centering a prime ng form both vertically and horizontally?

I am currently using prime ng 9.1.3 along with primeflex 1.3.0 in my project. Despite applying p-align-center, I am facing difficulty in vertically and horizontally centering the form on the screen when using a full screen height of 100vh. <div class=&q ...