Struggling with div elements not being able to overlap and remain in a fixed position

I'm currently browsing Cnet's website and I am intrigued by their sliding layer effect on the homepage. Take a look at their homepage

https://i.sstatic.net/7IcHn.jpg

I am trying to figure out how they achieved this effect. It seems like it involves positioning one layer fixed in the middle with a combination of z-index and a significant margin-top between layers, but I can't quite crack the code.

Any insights or suggestions?

#blue, #green, #red {
  height: 500px;
  width: 100%;
}
#blue {
  background: blue;
  z-index: 1;
}
#green {
  background: green;
  position: fixed;
  margin-top: 200px;
}
#red {
  background: red;
  z-index: 1;
  margin-top: 500px;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>

htmlcssposition

Answer №1

Is this the solution you were looking for?

To ensure proper functionality of z-index, adjust the position property to something other than static on your non-fixed div elements.

htmlk, body {
  margin: 0;
}
#blue, #green, #red {
  height: 200px;
  width: 100%;
}
#blue {
  position: relative;
  background: blue;
  z-index: 2;
}
#green {
  background: green;
  position: fixed;
  margin-top: 50px;
  top: 0;
  left: 0;
  z-index: 1;
}
#red {
  position: relative;
  background: red;
  z-index: 2;
  margin-top: 200px;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></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

Is it possible to refresh the page when the submit button is clicked in AngularJS?

Hey there! I'm currently working on an application using the MEAN stack with AngularJS for the front-end. Can anyone provide me with a solution on how to reload the page when clicking the submit button? I've tried the following code snippet to a ...

htmlcssangularjsmeanjs

Automating the process of saving websites as HTML using VB.NET and Internet Explorer

In my VB.NET project, I'm working on a tool that needs to navigate to a website within a loop and save each page as an HTML document. The pages are numbered sequentially, so setting up the loop is straightforward. www.example.com/pages/1.html www.exa ...

htmlvb.netinternet-explorerautomation

What is the best way to choose specific attributes in CSS?

My website has three large CSS files, each containing many classes. Some of these classes have the same name but are defined in different files. For example: CSS1: ... .btn-primary { background: #000; } ... CSS2: ... .btn-primary { back ...

css

Utilizing CSS to adjust the position of a background image at its starting point

I'm looking to create a unique design for the sidebar on my Tumblr page, where the header has a curved shape while the rest of the sidebar has a squared-off look with 100% height. This design should flow seamlessly off the page without a visible foote ...

csshtml

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Is it possible to use the margin property to perfectly center the body of the page?

I've been attempting to center the body of my content by applying margins on both sides. However, no changes seem to occur when I add margins to the body tag. I managed to find a workaround by creating a div element to contain the body content and ad ...

htmlcssmargin

Jade is causing issues with Lightgallery and is unable to load properly when the page is loaded

I'm diving into the world of JavaScript and struggling to get lightgallery up and running in my code. I've included all necessary stylesheets and scripts, but it seems like something's not quite right with my implementation. Here's a gl ...

javascripthtmllightgallery

Creating a custom backdrop for your kaboom.js webpage

I created a kaboom.js application and I'm having trouble setting a background for it. I've searched online extensively and attempted different methods on my own, but nothing seems to be working. (StackOverflow flagged my post as mostly code so I ...

javascripthtmlcsskaboom

Obtain viewport information in an AngularJS controller

Are there ways to access the viewport's dimensions (height and width) within an angular controller? ...

htmlangularjsresponsive-design

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Determine the number of children within the parent container and delete one child at a time by clicking on the button until all children are removed

My challenge lies in deleting all child divs except the last one in each parent div with the same class. Below is my code structure along with my JavaScript function to remove a child div called repeating-div: $('.repeatable').on('click&a ...

javascriptjqueryhtmlbootstrap-4

How to center the navigation list vertically with double lines and maintain the href block?

Looking for a solution to align vertically in a basic navigation list bar, particularly when some items have two lines of text. I want the text to be vertically aligned to the middle, while still maintaining the ability to hover and click within the list ...

htmlcssnavigation

Ways to display an icon in Angular 10 only when it is hovered over

Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and ...

htmlcssangularicons

Struggling with implementing ng-repeat in AngularJS for displaying HTML content

I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...

javascripthtmlangularjs

Discovering the selected row with jqueryIs there a way to locate

There is a table with rows and a button that allows you to select a row: <table id="mytable" class="table-striped"> <tbody> <tr id="1"><td>Test1</td></tr> <tr id="2"><td>Test2</td>& ...

javascriptjqueryhtml

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

I'm currently working on an Opera Extension and I have a question. Is there a way to use the includes folder in order to directly inject jQuery into the live HTML of a webpage? For example, can I change the background color of the DOM to black? If ...

javascriptjqueryhtmlcssopera

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

javascriptcsscss-position

Text that must always be centered

I'm having an issue with my match result page layout. The "VS" is not consistently centered and it's causing some weird display problems. How can I ensure that the "VS" is always centered? http://jsfiddle.net/3adhoker/ .result-in-month:nth-ch ...

htmlcss

Responsive CSS - reordering div elements

#div1 { position: relative; max-width: 100%; height: 100px; background-color: green; color: white; } #div2 { position: relative; max-width: 100%; height: 100px; background- ...

htmlcssresponsive-design

I can't figure out why the navigation bar in my Rails app is displaying vertically instead of horizontally

My Rails app has a navbar crafted with Bootstrap, but it's displaying vertically instead of horizontally. To see the issue in action, you can visit the app here. Despite referencing several articles on the topic (listed below), the problem remains unr ...

htmlcssruby-on-railstwitter-bootstrapbootstrap-4