Combining two different elements using CSS styling

In the process of designing, I am faced with the challenge of overlaying one section on top of another while maintaining a curved shape like shown in this design.

I have divided the sections into first (blue) and second (gray), and the current layout looks like this Pre CSS.

My attempt to use the translateY property to elevate the second section above the first has resulted in the second section covering the first, causing the loss of the desired curve as seen in Post CSS.

Although I have tried using the z-index property, it does not seem to resolve the issue. I am hesitant to use the position: absolute/relative property as the sections are distinct. Any suggestions?

cssbootstrap-4flexboxcss-selectorsmargin

Answer №1

I attempted to utilize the z-index property, but it appears to not be functioning correctly.

In order for the z-index to take effect, the position property must not be static. According to information on W3Schools:

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

I was unable to verify this as you did not provide a fiddle. Was the CSS for the sections styled with a position property like this?

.section-1 { position: relative; z-index:1; }
.section-2 { position: relative; z-index:2; }

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

I prefer to not have the box-shadow showing up on top of the navigation bar

Check out this cool demo: View Demo I am looking to add a shadow effect above the footer section, but not above the navigation bar. nav{ background-color: blue; height: 100px; } main{ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5); background- ...

htmlcss

Does the margin fall within the element's boundaries?

Consider this code: <html> <head> <title>Understanding CSS Box Model</title> </head> <body> <section> <h1>An example of h1 inside a section</h1> </section> </body> </html& ...

htmlcss

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

htmlcss

Why is my Bootstrap Carousel Switching Images but Refusing to Slide?

I've encountered a problem with my bootstrap carousel. The slide effect doesn't seem to be working, even though I have added the "slide" CSS tag. Instead of sliding, the images just quickly change without any transition. Here are some key points ...

javascriptjquerycssbootstrap-4

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Using Selenium to Locate Elements Inside a Flexbox

I have come across a similar question before, but none of the solutions I've discovered seem to work in my specific case with this particular website. My current challenge involves trying to click on a single top listing by navigating to the page usi ...

pythonseleniumflexbox

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...

javascriptcssreactjsmaterial-uijss

How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...

css

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

In a previous version of jQuery, the default behavior was different. When I use .css("height") and .height(), it gives me the computed height instead of what I actually want. I only need the height value if it is explicitly declared in the CSS for that ele ...

jqueryhtmlcss

Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes: https://i.sstatic.net/F0QZ6.png HTML: <div class="label label-as-badge"> {{ value.Termo }} <i class="fa fa-times"></i ...

htmlcssangularflexboxfont-awesome

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

CSS: Is it possible to make a div even smaller than the invisible padding of a font?

link to code: http://jsfiddle.net/xVCrn/1/ (best viewed in chrome / webkit) I'm attempting to create a 1px margin for the red section within the dark button area, but I am struggling to adjust the height of the red part. =( The objective is to: ...

css

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

htmlcssangulartypescriptpaypal

Issue with PHP page not properly connecting to the recently updated CSS file

Yesterday, I successfully linked my CSS in the head tag right below the title tag using this code: <link href="css/main.css" rel="stylesheet"> Yesterday, everything was working fine with the styles. However, today when I try to add new styles, the ...

phphtmlcss

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated. Here is the code snippet: $(d ...

javascripthtmljquerycss

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

Why isn't the image adjusting its size to fit the container it's placed in? Am I missing something?

My issue involves getting an image to resize and stay within its designated div. However, the image continues to spill over onto the div below when I adjust the browser size or view it on my laptop. I have not set any fixed dimensions for the image. I am ...

cssimagetwitter-bootstrapresponsive-designbootstrap-5

Ways to retrieve information when text is modified and a dropdown is selected within an input field

I have an input field with a text box and a dropdown. My goal is to trigger data based on text changes in one method, while using another method for the dropdown. Check out the code below. const allList = [ { id: "1", value: "Fruits" ...

javascriptreactjsbootstrap-4

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

csscss-position

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation