Displaying block in front of flex-items

I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work. 

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.front .box {
  margin: 20px auto;
}

.back {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}
<div class="back">
  <div class="box yellow">
    <div class="box red" style="position:block; margin-left: 50px; z-index: 99999">2</div></div>
  <div class="box green">2</div>
</div>

htmlcss

Answer №1

Modify it from position: block to position: absolute. The correct positioning attribute for proper functioning of z-index is position: absolute.

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.front .box {
  margin: 20px auto;
}

.back {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}
<div class="back">
  <div class="box yellow">
    <div class="box red" style="position:absolute; margin-left: 50px; z-index: 99999">2</div></div>
  <div class="box green">2</div>
</div>

Answer №2

Upon initial inspection, my attention was drawn to the use of position:block, which is incorrect. The proper values for the position property are typically absolute or relative. It seems more appropriate to include the inline styles within the .red CSS selector. If you want the red box to appear in front, consider using the order property, as it only affects flex items. For example:

.green{
background: green;
order: -1;
}

This will position the green box further to the left than the red box. By default, all flex items have an order of zero (0), so assigning a negative value will shift the item to the left until it reaches an element with a lower order value. I also noticed that the red box appears to lack a specified height, or perhaps it was unintentionally omitted while typing. #happyCoding

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

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

htmlcss

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

javascriptjqueryhtmlcss

Fixing W3 Validation Errors in your Genesis theme through CSS requires a few simple steps. Let's

As a newcomer to this forum, I kindly ask for understanding regarding my current issue. Upon checking my website vocaloid.de/Wordpress/ using the W3C CSS validator, I discovered several parsing and value errors. In an attempt to solve this, I disabled all ...

htmlcssvalidationgenesis

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

I am currently utilizing CSS grid to create the layout for my web application. I need to specify that a particular class should have a minimum grid-column span of 3 frames and extend across the entire grid row if it is the only object in that specific row. ...

htmlcsscss-grid

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

htmlcss

How can I transform an HTML div into a video file like MP4 using Python and Django?

I'm looking to take a HTML page and target a specific <div> within it in order to convert it into video format. Purpose: I understand that HTML is typically static, but I have a requirement to transform it into a video. I'm seeking method ...

javascriptpythonhtmljquerydjango

The necessary attribute is malfunctioning. (HTML)

I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...

javascripthtmlattributes

Extracting information from several span elements within the main span class using BeautifulSoup

I'm currently attempting to extract data from the following HTML code: <span class="double-line-ellipsis"> <span> ₹ 2800 for 2 (approx) </span> <span> | </span> <a data-w-onclick="stopClickPropagation|w1-re ...

pythonhtmlweb-scrapingbeautifulsoup

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

htmlcssflexbox

I am looking to incorporate an HTML file into my JSON data

Is there a way to include an HTML file in my JSON by using the $.get() function or any alternative method? { "user": { "username": $.get('profile.html') } } ...

jqueryjsonhtmlfileload

Unveiling the Mystery: Java Tips for Capturing the Chosen Value from a DropdownChoice in Apache W

In my Java class, I created a method where I instantiate a DropDownChoice object for a select menu and add it to the form. Within this method, I am populating the projects list into the billableProjectsList. public class ReportCriteria implements Serializa ...

javahtmlwicketdropdownchoice

Trouble arises with AJAX due to DOM traversal errors

I am trying to set up a system for liking and disliking with a counter. However, I am facing issues with my AJAX call, specifically when attempting to change the HTML of selected elements in the view after sending values to the DB. The element in question ...

javascriptjqueryhtmlajaxdom

Ways to make Joomla! send emails in HTML format

I am knowledgeable about using Joomla! with phpMailer for sending emails. I understand that in order to send emails in HTML format, the following code must be used: $mailer->isHTML(true); However, this approach requires editing the source code of defa ...

phphtmlemailjoomlaphpmailer

The twelfth child in the sequence is not functioning properly, although the others are working correctly

In my list, I have 12 elements and each element contains a div. My goal is to set different sizes for each div by using nth-child on the li element. However, the configuration for the 12th element does not seem to work correctly compared to the rest of the ...

htmlcss

Solving the issue of .css being blocked due to MIME type while building tailwind is a common problem faced by

https://i.stack.imgur.com/nrDgJ.png While working on my tailwind CSS project, I ran npm run build. However, upon opening the built index.html file, I noticed that the CSS file was not loading properly. How can I resolve this issue? I am unsure of what st ...

cssnpmtailwind-cssweb-development-servernpm-publish

capturing webpage content with javascript for use in a screenshot

Is there a way to capture a screenshot of a webpage using JavaScript and utilize the canvas tag for this purpose? I attempted to use the html2canvas plugin in the past, but found it lacking in power. I would like to achieve this without relying on extern ...

javascriptjqueryhtmlcanvaswebpage-screenshot

PHP and MySQL form is not being updated with new data

In my database, the fields include: id,name,email_id,address,phone_no,username,password,category,date <?php include_once('connect_to_mysql.php'); if(isset($_POST["submit"])){ $a=mysql_real_escape_string($_POST["name"]); ...

javascriptphpmysqlhtml