Arrangement priority and fixed location

Here is the issue I'm facing:

f http://d.pr/i/Kge6+

I have three images positioned absolutely within a box that is fixed in position. I want the images to not overlay on top of each other, but despite trying various solutions (changing z-index, removing them..)

Nothing seems to work.

<section class="home">
    <container>
        <div class="center-homepage">
            <img src="img/home-mascot.svg" alt="" class="mascot">
            <img src="img/home-scribble.svg" alt="" class="scribble">
            <img src="img/home-circles.svg" alt="" class="circles">
        </div>
    </container>
</section>
<section class="content">
    <div class="container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, quisquam, excepturi, debitis, accusamus harum consequatur expedita consequuntur pariatur quae autem unde molestiae laboriosam repudiandae iste illum quasi possimus placeat reiciendis?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, et, totam, magni, fugiat nesciunt qui quas tempore atque consequuntur ad neque eum ex modi beatae error necessitatibus officia fuga odio.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, voluptatibus, itaque sed saepe exercitationem atque voluptas! Similique, temporibus, fugit, tempora, voluptate culpa asperiores eligendi quibusdam explicabo repellendus esse quasi earum?</p>
    </div>
</section>

.home {
  height: 576px;
  width: 100%;
  position: relative;
  background: url(' (a lot of data URI) ') no-repeat center 32px, #8b737a;
  background-attachment: fixed; }

.center-homepage {
  width: 500px;
  margin-left: -250px;
  height: 400px;
  top: 90px;
  position: fixed;
  left: 50%;
  z-index: 1; }

And the css:

.mascot, .circles, .scribble {
  position: absolute; }

.mascot {
  width: 190px;
  left: 50%;
  margin-left: -95px;
  top: 60px;
  z-index: 5; }

.circles {
  width: 230px;
  left: 50%;
  margin-left: -123px;
  top: 20px;
  z-index: 0; }

.scribble {
  width: 400px;
  top: 160px;
  left: 50%;
  margin-left: -200px;
  z-index: 3; }

.content {
  z-index: 100;
  position: relative; }

Check out the live website here

I'm still trying to understand the concept of "stacking order context". As far as I know, if the parent has a higher z-index, it should take precedence over its children, but it doesn't seem to be the case here.

Answer №1

From what I can see, the only thing required is:

.container {background: white;}

Unless there is something else that needs to be addressed.

Answer №2

Consider implementing a white div with a higher z-index to overlay the fixed image with text, rather than solely relying on a background color. Alternatively, experimenting with applying a negative z-index to the fixed images could achieve the desired effect.

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

By default, the text area element in Vue or Nuxt will send a message to the console

Every time I include a textarea html element in my Vue/cli or Nuxt projects, this message appears in the console. Is there a way to prevent this message from showing up in the console? <textarea rows="5" cols="33"> This is a textarea. < ...

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

Turn on and off scrolling of DIV content when hovering over it

How can I create a div that automatically scrolls to the bottom on hover? I tried implementing the code below, but it doesn't work as expected. It jumps to the bottom of the div's height on first hover and transitions smoothly on second hover. . ...

When switching between tabs on Twitter Bootstrap, the page automatically scrolls to the top

I am encountering an issue with my tabs setup. Each tab has a different height and there is a Row on top of the tabs. You can see the problem in action on this JSFiddle. Whenever I switch from a tab with greater height to a tab with less height, the page ...

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

I'm encountering an issue with my CSS image slider as it does not seem to be functioning properly on Google Chrome, yet

CSS: @-moz-keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 90% { left: -300%; } 95% { left: -400%; } 10 ...

Set the color of the text in the Material UI pagination component to a subtle shade

I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to ac ...

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

CSS transformation: skewing without any blurring effects

Is there a way to create tilted drivers with borders and text without sacrificing the sharpness of the font and border? I have used the transform: skew(); CSS rule for tilting, but it has caused blurriness. How can I add font smoothing and maintain sharp b ...

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

implementing a smooth transition effect for image changes upon hover

I've been working on a React project where I created a card that changes its image when hovered over. I wanted to add a smoother transition effect to the image change using transition: opacity 0.25s ease-in-out;, but it doesn't seem to be working ...

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can ePub format books be displayed in a web browser using only HTML5, CSS, and jQuery? I would appreciate any suggestions on how to accomplish this. Additionally, it needs to be responsive so that it can work on iPad. While I am aware of this requirement, ...

Weird Android CSS problem: mysterious white overlay appearing in all browsers, both zoomable and touch-sensitive

After testing my website in various browsers, I discovered that while it looks fine on most platforms, there is a persistent issue on Android devices. The problem occurs when the user scrolls down around 30% of the page - a white overlay appears and exten ...

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...