element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location.

Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices!

https://i.sstatic.net/OtO6O.jpg

The "ticket" element appears to be hidden behind the cards (not sure why), and I want it to be positioned above the images for easier editing.

Here's the relevant code:

CSS

// Here are all the styles related to the view controller.
// These styles will automatically be included in application.css.
// Sass (SCSS) can be used here: http://sass-lang.com/
.box{
  position: absolute;
  top: calc(50% - 125px);
  top: -webkit-calc(50% - 125px);
  left: calc(50% - 300px);
  left: -webkit-calc(50% - 300px);
}

/* Additional CSS styles omitted for brevity */

.ticket:after{
  content: '';
  /* More box-shadow declarations omitted for brevity */
}

/* Additional CSS styles omitted for brevity */

.slip{
  left: 455px;
}

.nameslip{
  top: 60px;
  left: 410px;
}

.flightslip{
  left: 410px;
}

.seatslip{
  left: 540px;
}

/* More CSS classes and styles omitted for brevity */

HTML

<% title("Home Page") %>
<h1><i class="fa fa-home"></i> Home Page <small>views/pages/home.html.erb</small></h1>
<div class="section" style="background-image: url('https://c2.staticflickr.com/2/1334/1484360775_8391c2ce1a_b.jpg')">
<div class="container" style="color: white">
  <div class="box">
    <ul class="left">
      <li></li>
      <li></li>
      <li></li>
      
      <!-- Additional list items omitted for brevity -->
      
    </ul>

    <ul class="right">
      <li></li>
      <li></li>
      <li></li>
      
      <!-- Additional list items omitted for brevity -->
      
    </ul>
    
    <div class="ticket">
    
        <!-- Ticket content and sub-content omitted for brevity -->
        
    </div>
    
    <div class="barcode"></div>
    <div class="barcode slip"></div>
    
  </div>
  </div>

</div>
</div>
<div class="row">
  
  <!-- Content of card elements omitted for brevity -->
  
</div>

View Fiddle

Answer №1

Your cards are contained within a .row div that comes after the ticket. Elements located lower in the DOM have a higher z-index compared to elements positioned higher in the DOM, causing them to appear "in front" of other elements. To modify this default hierarchy, you can utilize the z-index property.

.row {
    z-index: 1;
}

An alternative approach is to rearrange the structure of your HTML so that the ticket follows the .row element. This adjustment would be effective because it would result in placing the ticket above the .row in the natural hierarchy.

Answer №2

If you want the ticket section to be displayed below the previous element (on a new line) , consider adding the following to the .ticket css:

display: list-item;

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

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

<td> <select class="type"> <option value="Espresso">Espresso</option> <option value="" class="">Cappuccino</option> <opti ...

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

Activate the button solely when the text field has been populated without any spaces

Searching for a solution to my query, but all the suggestions I've encountered don't consider spaces as valid input. In the join function I have, the button should be disabled if the user enters only spaces. A requirement is for actual text inpu ...

Display/Conceal content with JQuery on a PHP webpage

I am having trouble with the following code. My intention is to show/hide the content between the #info id when clicking buttons, but nothing seems to be happening. Could you help me identify the issue? echo '<script> $( "#show' . $r ...

jQuery Animation: Creative Menu Icon Display

Whenever the toggle menu's navigation icon is clicked, it triggers an animation that transforms the "hamburger" icon into an "X", causing the navigation menu to drop down. If a user clicks either the navigation icon or outside of the active toggle me ...

HTML text field within the same line

Is there a way to create multiple text fields on the same line? I have tried this code: <div class="col-lg-2"> <div class="form-group"> <label>Working experience</label> <input type="text" class="form-contro ...

What causes an image's size to change when it floats within the parent container?

There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...

Ways to deselect checkboxes and eliminate validation requirements

Below is the HTML code snippet that I am working with: <div class="form-group"> <div class="input-group"> <label for="daterange-vacancy" class="input-group-addon">Van</label> ...

Send form data without reloading the page and connect it to a JavaScript script

I've designed a system that reveals values based on a specific input selection. Below is the main form where users can enter model numbers and press enter: <form> <input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$" ...

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

The age calculator is failing to display the accurate age calculation

This code is designed to compute the age based on the selected value in the combo box, and display the result in the text box below. The age should update every time the user changes the selected value in the combo box. However, the computed age is not cur ...

HTML Date Form: Setting the Start Date to Tomorrow with JavaScript

Is there a way to restrict the start date to tomorrow's local date? I'm having trouble with the code below: <form method="POST"> <div> <label for="s2">pickup_date</label> ...

Vue transition not functioning properly when hovering over text for changes

When you hover over the circular region on the website, the text and description in the red box will change. To add a fade animation effect when the text changes, I attempted to use <transition> as per the documentation provided in this link. Unfor ...

Arrange a line of images in the center

I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn&a ...

Creating a button with a water-inspired design using CSS that works seamlessly across

Looking to create a stylish aqua-themed button that works seamlessly across different browsers. I'm new to CSS, so any guidance is appreciated. I found an online example that looks great in Chrome but fails to display properly in IE... Check out the ...

Adjust the height of the div element to match the screen height with AngularJS controller

Can someone please assist me in resolving this issue? I'm currently working on a div element that displays data (positioned on the left side of the screen). I want to add a scrollbar exclusively to this div. I managed to achieve this by using the fol ...

Managing the combination of <a href/> and <br/> tags simultaneously

I'm working on a website that features details similar to those shown in the image: https://i.sstatic.net/tws1D.png Below is the HTML content: <div class="tableholder"> <br> <br> Open <a href="javascript:popWin1('/ASCNA/s ...

Media queries in CSS not functioning as intended

Trying to scale media requests with an image (logo) for various mobile devices like iPhone 5, 6, 6+, iPads, and large screens. Need to specify styles for portrait and landscape orientation as well. The code seems to be functioning only for iPhone 6, iPads ...

Guide to applying Bootstrap styles to a specific section of an HTML document

What can I do to ensure that the Bootstrap library used by the main app does not affect the styling of my controls when integrating my web application inside the main app? I want to maintain the current styles of my controls without any interference from ...

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...