The z-index functionality does not seem to be functioning properly on versions Chrome 52, Edge,

Trouble with the size of image returning incorrectly in SAFARI browser

What I have:

Framework:

  • Jquery
  • Bootstrap

What I do: Managing an image slider

Browsers (working, not working):

  • chrome version 52 (n) (same mobile result)
  • firefox Version 52.0.2743.82 m (w) (same mobile result)
  • Internet Explorer 11 (w)
  • edge version 25.10... (n)
  • Safari phone (version unknow) (n)

Comparison Image: Work vs Not Working

Issue: The overlay should only cover the img, then the text and button, but the z-index is being ignored.

I cleaned up unnecessary code.

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); 
}
.fade-carousel .slides .slide-2 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="">
<title>Home</title>
<!-- Bootstramp -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Font-Awesome -->

<!-- CSS-Animation -->
<!-- Fontelo -->
</head>
<body>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000\"="" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"`">></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class=""></li>
<li data-target="#bs-carousel" data-slide-to="1" class=""></li>
<li data-target="#bs-carousel" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<h1>Get rich</h1>
<h3>Start now!</h3>
<button class="btn btn-hero btn-lg" role="button">Registration</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
<!-- Scroll to top feature -->
<"/body></html

htmlcssslider

Answer №1

It's not recommended to try squeezing that overlay in-between, so I found a better way to make it work.

Instead of using the overlay markup div and its CSS rule, I used a pseudo element.

If desired, you can customize it for each slide individually with different colors, opacity, or background images.

/********************************/
/*            Overlay           */
/********************************/
.fade-carousel .slides:after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: black;
  opacity: 0.7;
}

Sample snippet

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

/********************************/
/*            Overlay           */
/********************************/
.fade-carousel .slides:after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: black;
  opacity: 0.7;
}

.fade-carousel .slides .slide-1 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); 
}
.fade-carousel .slides .slide-2 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="">
<title>Home</title>
<!-- Bootstramp -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Font-Awesome -->

<!-- CSS-Animation -->
<!-- Fontelo -->
</head>
<body>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class=""></li>
<li data-target="#bs-carousel" data-slide-to="1" class=""></li>
<li data-target="#bs-carousel" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<h1>Get rich</h1>
<h3>Start now!</h3>
<button class="btn btn-hero btn-lg" role="button">Registration</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
<!-- The scroll to top feature -->
</body></html>

Answer №2

There seems to be an issue with the way you are calling the bootstrap.min.css file, make sure to use the full path.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

You can also verify it in this link.

Answer №3

I have identified the issue with nesting position relative-absolute. To address this problem, you can follow this approach:

<div class="carousel-inner">
    <div class="item slides active">
        <div class="overlay"></div>
        <div class="slide-1"></div>
        <div class="hero">


/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}

/********************************/
/*          Cu0stom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); 
}
.fade-carousel .slides .slide-2 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}
HTML CODE CAN BE INSERTED HERE (not shown)

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

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...

htmlcss

Updating variable values in AngularJS while navigating through routes

How can I dynamically set the flag icon inside the page header based on the selected language using AngularJS? The language selection is done in a separate .htm file and all managed by AngularJS routing. My application has a single controller called "appCo ...

javascripthtmlangularjsroutes

Looking for assistance in selenium with python to extract table rows that do not have the attribute "style='display: none;'"

This snippet represents the HTML for a specific table row that I am not interested in: <tr class="items" data-href="#" style="display: none;"> On the other hand, here is the one that I actually want to extract: <tr c ...

pythonhtmlselenium-webdriverweb-scraping

Displaying Unicode CSS Font Awesome Icons as Boxes in a React Project

I have incorporated the jPlayer example into a create-react-app. Encountering an issue where font-awesome icons are displaying as boxes in this CodeSandbox illustration. https://codesandbox.io/s/peaceful-heisenberg-d59nz?fontsize=14&hidenavigation=1&a ...

cssreactjsunicodefont-awesome

Assistance required for posting Jquery files

Attempted to upload a file using jQuery with a hidden form and an Input element, triggering the file browser with jQuery. The changed input is then sent to a PHP server script. Encountered an issue where submitting the form with $("form1").submit(); worke ...

phpjavascriptjqueryhtml

Trouble encountered in aligning two DIVs in a horizontal position

I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when ...

csshtml

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

javascripthtmllocal-storage2d-games

The inner div is not adhering to the maximum height set by the CSS for the outer

I have three different divs in my setup: The grey div acts as the outer div and sets the height The green div is responsible for scrolling through the content inside of The red div, which contains the actual content Below is a simplified code sample that ...

htmlcss

Include links to external CSS and JS files within an Angular 2 component

To exclusively use "Bootstrap Select" in my.component.ts, I attempted the following approach: @Component({ templateUrl: 'my.component.html', styleUrls: [ 'my.component.css', //Bootstrap Select 'https:/ ...

javascriptcssangular

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...

htmlcssresponsive-designjquery-mobile-navbar

Ways to reduce the size of images in Bootstrap 4

Is there a way to adjust the height of the images to make them fit better on the page? Here is an example of what I'm trying to achieve: https://i.sstatic.net/BMlWl.jpg I attempted to use custom CSS to modify the height, but it ended up making the im ...

htmlcssbootstrap-4

get the second child element using javaScript

Alright, I am working on a school assignment where I have 4 containers. When you click a button in a container, a popup shows the image and heading of the container you clicked on. I have figured out how to get the image to display, but I'm struggling ...

javascripthtmlcss

You are unable to select the drop-down menu and radio button

I am having trouble with the radio button and drop-down arrow on my project. When I try to click on them, nothing happens. It seems like something is hidden but I can't figure out what it is. Could someone please assist me with this issue? If anyone ...

htmlcss

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

Check out the live example here: http://jsfiddle.net/0gmbbv5w/ In my application, I have an object retrieved from the database that I bind to a <select> var NoticeType = function (noticeType) { this.NoticeTypeId = ko.observable(noticeType.Notic ...

javascriptcssknockout.js

Retrieving the data from an HTML button with JavaScript

Currently, I am working on creating a calculator. The HTML and CSS components are complete, but I am facing an issue with getting the button clicks to reflect in the display. As I am still new to JavaScript, I would appreciate any guidance on how to achiev ...

javascripthtmlfunctioncalculator

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

javascripthtmleventsonclickbuttonclick

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

htmlinput

Bottom-anchored horizontal navigation bar for seamless scrolling experience

Is there a way to create a navbar with horizontal scrolling at the bottom of the page without compromising its scrollability? When I use position: fixed;, the navbar becomes non-scrollable. div.scrollmenu { background-color: #333; overflow: auto; ...

htmlcss